A calendar overlay for selecting a date, date range, or dual date.
Loading demo: datepicker-real-world
npx sdaia-ui@latest add datepicker
import { DatePicker } from "@/components/ui/date-picker"1<DatePicker2onSubmit={(val) => console.log('Submit:', val)}3onCancel={() => console.log('Cancel')}4showHijri5type='withSidepanel'6/>
Use surface="glass" to enable Glass Effect on Date Picker
Loading demo: date-picker-glass
Use `type="Dual"` for a dual-month calendar layout.
Loading demo: date-picker-default
Use `range="true"` for a range-month calendar layout.
Loading demo: date-picker-range
The default Gregorian Date picker.
Loading demo: date-picker-gregorian
The default Gregorian+Hijri Date picker.
Loading demo: date-picker-gregorian-hijri
The default single-date picker.
Loading demo: date-picker-single
Props for the DatePicker component.
Prop | Type | Default | Required |
|---|---|---|---|
dir | 'ltr' | 'rtl' | — | optional |
type | 'default' | 'withSidepanel' | 'default' | optional |
single | boolean | false | optional |
showHijri | boolean | false | optional |
mobile | boolean | — | optional |
range | boolean | — | optional |
value | Date | null | — | optional |
rangeValue | DateRange | — | optional |
defaultValue | Date | null | — | optional |
defaultRangeValue | DateRange | — | optional |
onChange | (date: Date | null) => void | — | optional |
onRangeChange | (range: DateRange) => void | — | optional |
onSubmit | (value: DateRange) => void | — | optional |
onCancel | () => void | — | optional |
showDateInputs | boolean | true | optional |
showSecondMonth | boolean | !single | optional |
minDate | Date | — | optional |
maxDate | Date | — | optional |
labels | Partial<DatePickerLabels> | — | optional |
presetFooter | ReactNode | — | optional |