ui
Date Picker
A date picker component with support for date selection, time selection, and month picking.
1. Import
Import the Date Picker component from the design system.
import { DatePicker } from "@/design-system/components/ui/date-picker"2. Props
Date Picker component props.
| Prop | Type | Default |
|---|---|---|
| label | string | React.ReactNode | -- |
| value | Date | -- |
| onChange | (date: Date | undefined) => void | -- |
| placeholder | string | 'Pick a date' |
| dateFormat | string | 'dd/MM/yyyy' |
| showTime | boolean | false |
| timeOnly | boolean | false |
| mode | 'single' | 'month' | 'single' |
| error | string | -- |
| required | boolean | false |
| disabled | boolean | false |
| disabledPast | boolean | false |
| disabledFuture | boolean | false |
| onDisabled | (date: Date) => boolean | -- |
| size | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'md' |
| locale | string | Locale | -- |
| cancelText | string | -- |
| applyText | string | -- |
| monthNames | string[] | -- |
3. Sizes
Available sizes for the Date Picker component.
4. Usages
Common Date Picker patterns and configurations.
import { DatePicker } from "@/design-system/components/ui/date-picker";
import { useState } from "react";
function Example() {
const [value, setValue] = useState<Date | undefined>(undefined);
return (
<DatePicker
label="Date"
placeholder="Pick a date"
value={value}
onChange={setValue}
/>
);
}