ui
Date Range Picker
A date range picker component with support for selecting date ranges and preset options.
1. Import
Import the Date Range Picker component from the design system.
import { DateRangePicker } from "@/design-system/components/ui/date-range-picker"2. Props
Date Range Picker component props.
| Prop | Type | Default |
|---|---|---|
| label | string | React.ReactNode | -- |
| value | DateRange | -- |
| onChange | (range: DateRange | undefined) => void | -- |
| placeholder | { from?: string; to?: string } | { from: 'From date', to: 'To date' } |
| dateFormat | string | 'dd/MM/yyyy' |
| presets | DateRangePreset[] | -- |
| showPresets | boolean | -- |
| 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 | -- |
3. Sizes
Available sizes for the Date Range Picker component.
4. Usages
Common Date Range Picker patterns and configurations.
import { DateRangePicker } from "@/design-system/components/ui/date-range-picker";
import { useState } from "react";
import type { DateRange } from "react-day-picker";
function Example() {
const [value, setValue] = useState<DateRange | undefined>(undefined);
return (
<DateRangePicker
label="Date Range"
placeholder={{ from: 'From date', to: 'To date' }}
value={value}
onChange={setValue}
/>
);
}