Date Picker
Date input composed from Popover + Calendar. Shows the selected date formatted via date-fns, opens a calendar grid on click.
Empty
Pre-selected
Disabled
Installation
pnpm dlx @hex-core/cli add date-pickerAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | object | — | Controlled selected Date |
onChange | function | — | Callback when the user selects a date: (date: Date | undefined) => void |
placeholder | string | Pick a date | Text shown on the trigger when no date is selected |
dateFormat | string | PPP | date-fns format token for the trigger label (e.g. 'PPP', 'yyyy-MM-dd') |
disabled | boolean | false | Disable the picker trigger |
aria-label | string | — | Accessible label — required when no adjacent visible <label> is used |
AI Guidance
When to use
Use for selecting a single date in a form. Shows a formatted text label and opens a month grid on click. Composes Popover + Calendar + button trigger.
When not to use
Don't use for date ranges (compose Calendar mode='range' + Popover yourself). Don't use for native mobile date UX (<input type='date'> is often better on phones). Don't use if you need time selection — combine with a separate time picker.
Common mistakes
- Passing a string to value — must be a Date object
- Missing aria-label when the picker has no adjacent visible <label>
- Overriding className in a way that hurts focus ring visibility
- Forgetting that the popover auto-closes on select — provide onChange to capture the value
Accessibility
Trigger is a real <button> with focus ring. When rendered without a visible label, pass aria-label. The popover portals and traps keyboard focus inside Calendar until the user selects or presses Escape.
Token budget: 700