منتقي التاريخ
طبقة تقويم لاختيار تاريخ أو نطاق أو تقويمين.
Loading demo: datepicker-real-world
التثبيت
npx sdaia-ui@latest add datepicker
الافتراضي
استخدم type="Dual" لتخطيط تقويم مزدوج الشهر.
Loading demo: date-picker-default
نطاق
استخدم range="true" لتخطيط تقويم نطاق الشهر.
Loading demo: date-picker-range
مفرد
أداة اختيار تاريخ مفرد الافتراضية.
Loading demo: date-picker-single
مرجع الواجهة البرمجية
DatePickerProps
خصائص مكوّن DatePicker.
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 |