Date Picker
Calendar-based date selection.
Usage
A segmented field plus a calendar popover, sharing one value. Put the Trigger inside the Input, after the segments —
it is usually icon-only, so give it an aria-label.
Why both halves
The pairing is the point. Someone who knows the date types it in three keystrokes; someone choosing "the second Tuesday" opens the calendar. Ship only the calendar and you have made the fast path slow. Ship only the field and you have made browsing impossible.
They share one value rather than two synced ones, which is why typing a date moves the calendar's selection and picking a day fills the segments — no reconciliation code on your side. Asserted in the tests.
Almost entirely reused
Only Root, Trigger, Content and Calendar are specific to the picker.
Everything else is a component you already have, because Bits re-exports the identical modules:
Input,Label,Segment→ Date Field- the calendar chrome → Calendar
Arrow,Close→ Popover
So a field inside a picker behaves and looks exactly like a standalone one — not by convention, but because it is the same component.
Everything on those pages applies here: locale reorders the segments
and sets the calendar's first day of week, calendarLabel must be passed
(Bits defaults it to the literal word "Event"), and the calendar's nav buttons have hardcoded aria-labels.
Props
DatePicker.Root — value, placeholder and open are bindable.
| Prop | Type | Default |
|---|---|---|
value The selected date. Bindable. A `DateValue`, not a JS `Date`. | DateValue | — |
onValueChange Called when the selection changes. | (value: DateValue | undefined) => void | — |
open Whether the calendar popover is open. Bindable. | boolean | false |
onOpenChange Called when the popover opens or closes. | (open: boolean) => void | — |
placeholder The month on screen. Bindable. | DateValue | — |
minValue Earliest selectable date. | DateValue | — |
maxValue Latest selectable date. | DateValue | — |
isDateUnavailable Exists but cannot be picked — a booked day. | (date: DateValue) => boolean | — |
isDateDisabled Disabled outright. | (date: DateValue) => boolean | — |
granularity Smallest editable unit, which decides the field's segments. | 'day' | 'hour' | 'minute' | 'second' | 'day' |
locale BCP-47 locale. It drives the field's SEGMENT ORDER and the calendar's month names and first day of week, so it is not cosmetic. | string | 'en' |
calendarLabel What this picker is FOR. Bits builds the calendar's accessible name as `${calendarLabel} ${month} ${year}` and defaults it to the literal word "Event", so leaving it unset announces "Event January 2026". | string | 'Event' |
numberOfMonths How many months the calendar shows at once. | number | 1 |
name Name for form submission; Bits renders a hidden input. | string | — |
required | boolean | false |
disabled | boolean | false |
readonly | boolean | false |
class Extra classes merged onto the root. | string | — |
children | Snippet | — |
The reused parts are documented on their own pages.