Date Picker
@/components/kamod-ui/date-picker
Installation
Requires `@kamod-ch/ui` (includes Popover and Calendar). Optional: `lucide-preact` for icons in demos, `chrono-node` for natural-language parsing in the demo below.
pnpm add @kamod-ch/uiUsage
`DatePicker` wraps a styled outline `Button`, `Popover`, and single-mode `Calendar` with `closeOnSelect`. For range, dropdown month/year captions, input-adjacent pickers, or RTL, compose primitives — see Examples. `Popover` supports `open` / `onOpenChange` for closing after select. `Calendar` supports `mode="single" | "range"`, `numberOfMonths={2}`, and `captionLayout="dropdown"`.
import { DatePicker } from "@/components/kamod-ui/date-picker";<DatePicker />Demo
Composed Popover + Button + Calendar with chevron — matches the shadcn overview snippet.
DatePicker component
Shortcut with `triggerIcon` (`chevron` | `calendar` | `none`), `align`, and `format`.
Calendar icon trigger
Leading calendar icon with left-aligned label (composed).
Basic
Label + full-width trigger inside `Field`.
Range picker
`Calendar` with `mode="range"` and `numberOfMonths={2}`.
Date of birth
Dropdown month/year caption and popover closes after a day is chosen (`open` state).
With input
Typed date string plus `InputGroup` calendar button; Arrow Down opens the popover.
Date and time
Date field next to native `Input type="time"` (shadcn-style layout).
Natural language
Uses `chrono-node` in the demo app to parse phrases like “In 2 days”.
Your post will be published on July 31, 2026.
API Reference
Props, slots and variants for this component.
Date Picker
Date Picker component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| value | Date | undefined | undefined |
| defaultValue | Date | undefined | undefined |
| onValueChange | (date: Date | undefined) => void | undefined |
| placeholder | string | "Pick a date" |
| closeOnSelect | boolean | true |
| align | "start" | "center" | "end" | "start" |
| triggerIcon | "chevron" | "calendar" | "none" | "chevron" |
| format | (date: Date) => string | formatDatePickerDisplay |
| children | ComponentChildren | default Button trigger |
Accessibility Notes
Keep placeholder and button text meaningful; associate labels with `FieldLabel` + trigger `id`. Calendar grid uses buttons for days; popover closes on Escape. For input hybrids, expose Arrow Down to open the calendar.