Date Picker
Button + Popover + Calendar bundled into one component. Supports optional time selection. For inline picking without a trigger, use Calendar directly.
Default
Click to open the calendar popover.
With time
Set withTime to add hour and minute selects below the calendar.
Disabled
Set disabled to block the trigger from opening.
API Reference
Props, events, and slots for each sub-component.
DatePicker
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | Date | null | null | Selected date. Supports v-model. |
| withTime | boolean | false | Add hour/minute selects below the calendar. |
| disabled | boolean | false | Disable the trigger. |
| placeholder | string | "Pick a date" | Trigger text when nothing is selected. |
| defaultHour | number | 9 | Initial hour when withTime is on. |
| defaultMinute | number | 0 | Initial minute when withTime is on. |
| disableFutureDates | boolean | false | Block selecting dates after today. |
| disablePastDates | boolean | false | Block selecting dates before today. |
| min | Date | null | null | Earliest selectable date. |
| max | Date | null | null | Latest selectable date. |
| minYear | number | — | Lower bound of the year dropdown. |
| maxYear | number | — | Upper bound of the year dropdown. |
| placeholderDate | Date | null | null | Month the calendar opens on when empty. |
Events
| Event | Description |
|---|---|
| update:modelValue | Fires with the chosen Date (or null). Enables v-model. |
Accessibility
Keyboard shortcuts and ARIA behavior.
Keyboard
| Shortcut | Description |
|---|---|
| Space | Opens the calendar popover from the trigger. |
| Enter | Opens the calendar popover from the trigger. |
| ↑ | Moves to the same day in the previous week. |
| ↓ | Moves to the same day in the next week. |
| ← | Moves to the previous day. |
| → | Moves to the next day. |
| Esc | Closes the popover and returns focus to the trigger. |
- Composes a button, popover, and calendar grid.
- Focus moves into the grid when the popover opens and back to the trigger when it closes.
- The trigger exposes aria-expanded to reflect the popover state.