Loading...
Loading...
> Unified date picker supporting single date, date range, date+time, and month-only selection modes.
1import { DatePicker } from "@/components/ui/date-picker"
1const [date, setDate] = useState<Date>();23<DatePicker4 value={date}5 onChange={setDate}6/>
1<DatePicker2 value={date}3 onChange={setDate}4 showMonthYearPicker5/>
1const [range, setRange] = useState<DateRange>();23<DatePicker4 mode="range"5 rangeValue={range}6 onRangeChange={setRange}7 showPresets8 numberOfMonths={2}9/>
1const [dateTime, setDateTime] = useState<Date>();23<DatePicker4 value={dateTime}5 onChange={setDateTime}6 showTime7/>
1const [month, setMonth] = useState<Date>();23<DatePicker4 value={month}5 onChange={setMonth}6 monthOnly7/>
1<DatePicker2 value={date}3 onChange={setDate}4 minDate={new Date()}5 maxDate={new Date(2025, 11, 31)}6/>
1<DatePicker2 value={dateTime}3 onChange={setDateTime}4 showTime5 use24Hour6/>
1<DatePicker2 value={new Date()}3 disabled4/>
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "single" | "range" | "multiple" | "single" | Selection mode |
| value | Date | undefined | - | Selected date (single mode) |
| rangeValue | DateRange | undefined | - | Selected range (range mode) |
| onChange | (date: Date | undefined) => void | - | Callback for single date selection |
| onRangeChange | (range: DateRange | undefined) => void | - | Callback for range selection |
| showTime | boolean | false | Show time picker (single mode) |
| use24Hour | boolean | false | Use 24-hour time format |
| showPresets | boolean | false | Show preset quick selects (range mode) |
| showMonthYearPicker | boolean | false | Show month/year dropdown selectors |
| monthOnly | boolean | false | Month-only picker (no day grid) |
| numberOfMonths | 1 | 2 | 1 | Number of months to display |
| minDate | Date | - | Minimum selectable date |
| maxDate | Date | - | Maximum selectable date |
| disabled | boolean | false | Disable the picker |
| placeholder | string | - | Custom placeholder text |
| className | string | - | Additional CSS classes |