Date Range Picker component
DateRangePicker component
Requires date-fns installed in the project importing this component.
June 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
July 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Properties
| Name | Description | Default |
|---|---|---|
| defaultMonth | The initial month to show in the calendar. Default is the current month. Use this prop to let DayPicker control the current month. If you need to set the month programmatically, use {@link month]] and [[onMonthChange}. | - |
| disableNavigation | Disable the navigation between months. | - |
| disabled | Apply the disabled modifier to the matching days. | - |
| fromDate | The earliest day to start the month navigation. | - |
| fromMonth | The earliest month to start the month navigation. | - |
| fromYear | The earliest year to start the month navigation. | - |
| hidden | Apply the | - |
| id | An unique id to replace the random generated id, used by DayPicker for accessibility. | - |
| max | The maximum amount of days that can be selected. | - |
| min | The minimum amount of days that can be selected. | - |
0-10 of 19
Note: This table does not include native DOM and React properties like `onClick`, `ref`, `id`, `aria-label` (and many others) supported by this component.