Date Picker
A calendar popover for dates and ranges, with editable time slots, durations and native form values.
Installation
Installs the Base UI flavor. Switch in the right panel.
Date and time
A ghost trigger with two months and a time range. Type a time, or arrow through 15-minute slots. The end list shows the duration from the start.
Date field
Opens on the selected date, or today. Choosing a date closes the calendar and returns focus to its trigger. Clear removes the selection.
Range with presets
Pick both ends or choose a shortcut. Escape during an unfinished pick restores the previous range. Booking and availability rules pass through calendarProps.
Forms and labels
A name adds a hidden field for native forms. A date submits as a local ISO date; a time adds T11:00, and ranges join two complete values with a slash.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "single" | "range" | "single" | Pick one date, or a start and an end. |
| value / defaultValue | Date | DateRange | — | Controlled or initial selection. A range is { from, to }. |
| onValueChange | (value: Date | DateRange | undefined) => void | — | Called for a date, a complete range, or a clear. |
| presets | DatePickerPreset[] | — | Range mode shortcuts, each with a label and a range. |
| time / defaultTime | string | null | — | One time in HH:mm format. null leaves the field empty. |
| onTimeChange | (time: string | null) => void | — | Called when a time is picked, typed or cleared. |
| timeRange / defaultTimeRange | TimeRange | null | — | Start and end on the same day, for example { start: "11:00", end: "12:45" }. |
| onTimeRangeChange | (range: TimeRange | null) => void | — | Called when either time changes. Moving the start preserves the duration. |
| step | number | 15 | Minutes between suggested time slots. |
| hourCycle / locale | 12 | 24 / string | — | Clock override and BCP 47 label locale. Defaults to the browser locale; stored times remain HH:mm. |
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "outline" | "ghost" | "outline" | A bordered field, or inline date and time segments. |
| placeholder | string | "Pick a date" | Empty prompt. Range mode defaults to "Pick dates". |
| clearable | boolean | true | Show a clear action in a populated outline field. |
| disabled | boolean | false | Disable the whole picker. Use calendarProps.disabled to block individual dates. |
| size | "default" | "compact" | — | Pin the trigger and popovers to a shared size step. |
| numberOfMonths / orientation | 1 | 2 / "auto" | "horizontal" | "vertical" | 1, 2 in range mode / auto | Calendar layout. Auto stacks two months when needed. |
| calendarProps | Partial<CalendarPassThrough> | — | Pass booked, available, disabled, cellSize, dayDetail, locale and other supported Calendar options. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open: boolean) => void | — | Control the date popover, or set its initial open state. |
| name | string | — | Submit a complete value through a hidden form field, in local ISO 8601 format. Ranges use a slash separator. |
| id / aria-label | string | — | Connect a visible label to the date trigger or name the group for screen readers. |
| className | string | — | Classes on the outer group. |
Adapted from Fluid Functionalism.