Date Range Picker component
DateRangePicker component
Requires date-fns installed in the project importing this component.
October 2025
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
November 2025
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
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. | - |
| layoutDirection | Layout direction of months. Generally you will need | - |
| max | The maximum amount of days that can be selected. | - |
0-10 of 20
Note: This table does not include native DOM and React properties like `onClick`, `ref`, `id`, `aria-label` (and many others) supported by this component.
In Dialog With Auto Layout Direction
In Dialog with `layoutDirection=auto`. Which makes it flexible as per available space and will change layout for screen responsiveness.
In Dialog With Fixed Layout Direction
In Dialog with fixed `layoutDirection=vertical`. It will keep it's layout for any screen sizes.