Date Picker
Compact date selection for product forms. Single date and range variants use the same trigger, calendar surface, disabled-date handling, and field status language.
Included in the single kansho full pack. Components are not offered as separate installs.
Single date
State matrix
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Range
The second click completes the range.
Component documentation
Date Picker
components/ui/date-picker.tsxPurpose
Lets users choose a single date or date range from a popover calendar.
Appropriate use
Use for date selection where a calendar is clearer than free-form text entry.
Example
components/ui/date-picker.tsx has a representative live example in the "Single date" section on /components/date-picker.
States
Supports single or range mode, controlled values, disabled state, invalid status, minimum and maximum dates, disabled matchers, clearing, and default-open previews.
API and props
DatePicker accepts value, range, change handlers, mode, placeholder, status, disabled, minDate, maxDate, disabledDates, defaultOpen, and className; DatePickerCalendar exposes the calendar composition.
Dependencies
React, Radix Popover, react-day-picker, Lucide icons, Field, and the Kansho cn utility.
Accessibility
The trigger is a button and react-day-picker provides calendar keyboard semantics; decorative icons are hidden.
Limitations
It does not parse typed natural-language dates or handle time and timezone selection; status changes the visual ring but is not forwarded as aria-invalid.
Source
Source: components/ui/date-picker.tsx.
Full pack
components/ui/date-picker.tsx is documented at /components/date-picker and installs only through the single Kansho full pack; no individual component install is offered.