Components · Form & Input
Date Range Picker
StableSince v0.0.1
Dual-calendar date range selector.
import { DateRangePicker } from '@nexub/react';Examples
Default
Controlled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | { from: Date | undefined; to: Date | undefined } | — | Controlled date range value. |
| onChange | (range: { from: Date | undefined; to: Date | undefined }) => void | — | Callback invoked when the selected range changes. |
| locale | Locale (date-fns) | — | Month and weekday names, week start and the trigger format. Defaults to the NexubProvider dateLocale; the calendar also follows the provider dir, so arrows flip in RTL. |
| placeholder | string | 'Select date range' | Placeholder text shown in the trigger input when no range is selected. |
| disabled | boolean | false | Disables the trigger input and calendar popover. |
| minDate | Date | — | Earliest selectable date. Dates before this are greyed out. |
| maxDate | Date | — | Latest selectable date. Dates after this are greyed out. |
| numberOfMonths | number | 2 | Number of months to display in the calendar popover. |
| aria-label | string | — | Field name for screen readers; the selected value is appended. |
| id | string | — | Id for the trigger button, e.g. to pair with a <label htmlFor>. |
| error | string | — | Error message displayed below the input. |
On iOS & Android
Web only
Date Range Picker has no @nexub/react-native twin. On phones, follow the platform pattern instead, or compose it from the native components listed on the React Native page.