Date Pickers
Live example
Date Pickers
Installation
npx shadcn@latest add https://hextech-ui.vercel.app/r/date-picker.jsonAPI reference
These are the main Date Pickers options. See the exported TypeScript types for inherited native or primitive props.
| Prop | Type | Default |
|---|---|---|
value / defaultValue | ISO day (DatePicker); DateRange (DateRangePicker) | — |
label | string (required) | — |
open / defaultOpen | boolean | false |
isDateUnavailable | (ISO day) => boolean | — |
Selection and popup
Use value and onValueChange for controlled dates and open with onOpenChange when controlling the popup. Use ISO Gregorian dates and mark unavailable days explicitly. The calendar popup keeps the surrounding light or dark theme.