Date Picker
A calendar overlay for selecting a date, date range, or dual date.
'use client'; import { DatePicker } from 'sdaia-ui'; export default function DatePickerRealWorld() {Installation
npx sdaia-ui@latest add datepicker
Usage
import { DatePicker } from "@/components/ui/date-picker"1<DatePicker2onSubmit={(val) => console.log('Submit:', val)}3onCancel={() => console.log('Cancel')}4showHijri5type='withSidepanel'6/>
Examples
Default
Use `type="Dual"` for a dual-month calendar layout.
<DatePicker onSubmit={(val) => console.log(val)} onCancel={() => console.log('cancel')} showHijri type='withSidepanel'Range
Use `range="true"` for a range-month calendar layout.
<DatePicker range={true}/>Single
The default single-date picker.
<DatePicker single/>API Reference
DatePickerProps
Props for the DatePicker component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'single' | 'dual' | 'dual' | optional |
mobile | boolean | - | optional |
range | boolean | false | optional |
value | Date | null | - | optional |
rangeValue | DateRange | - | optional |
defaultValue | Date | null | null | optional |
defaultRangeValue | DateRange | { start: null, end: null } | optional |
onChange | (date: Date | null) => void | - | optional |
onRangeChange | (range: DateRange) => void | - | optional |
onSubmit | (value: DateRange) => void | - | optional |
onCancel | () => void | - | optional |
presets | boolean | DatePickerPreset[] | - | optional |
showActions | boolean | - | optional |
showDateInputs | boolean | - | optional |
minDate | Date | - | optional |
maxDate | Date | - | optional |
labels | Partial<DatePickerLabels> | - | optional |
presetFooter | ReactNode | - | optional |
showHirjri | boolean | false | optional |