Date Picker
A date input with a calendar dropdown for selecting a single date or a date range, plus an inline variant for rendering the calendar directly.
Installation
tsx
import { DatePicker } from "madagent";Default
With Placeholder
With Min/Max Date
With Error
Date is required
Sizes
Disabled
Inline
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Range
Range with Custom Presets
Range with Date Constraints
Inline Range
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
September 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "single""range" | "single" | Selection mode. Single is a Date; range is a { start, end } pair. Determines the type of value/onChange. |
variant | "field""inline" | "field" | field renders an input with an anchored calendar popover. inline renders the calendar(s) directly with no input/popover — use this instead of composing a raw Calendar for inline date selection. |
value | Datenull (single)DateRange (range) | - | Currently selected value (controlled). null represents no selection in single mode. |
defaultValue | Date (single)DateRange (range) | - | Default selected value (uncontrolled). |
onChange | (date: Date) => void (single)(range: DateRange) => void (range) | - | Called when the user selects a date, or completes a range. |
presets | DateRangePreset[] | - | Range mode only. Custom quick-selection ranges. Defaults to Today, Last 7 days, Last 30 days, This month, and This quarter. |
minDate | Date | - | Earliest selectable date. |
maxDate | Date | - | Latest selectable date. |
isDateDisabled | (date: Date) => boolean | - | Application-defined disabled-date rule, applied in addition to minDate/maxDate. |
size | "sm""md""lg" | "md" | Input height and text scale. field variant only. |
placeholder | string | "DD-MM-YYYY" (single, LTR) · "Select date range" (range) | Placeholder for the input field. field variant only. |
label | ReactNode | - | Label above the input/calendar. |
errorText | ReactNode | - | Error message. field variant only. |
disabled | boolean | false | Whether the picker is disabled. |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
Range Mode
Usage
tsx
<div style={{ maxWidth: 300 }}>
<DatePicker label="اختر التاريخ" placeholder="يوم-شهر-سنة" />
</div>