| autoFocus | Automatically focuses the input on mount. | n/a | true |
| calendarAriaLabel | aria-label for the calendar button. | n/a | "Toggle calendar" |
| calendarProps | Props to pass to React-Calendar component. | n/a | See React-Calendar documentation |
| calendarIcon | Content of the calendar button. Setting the value explicitly to null will hide the icon. | (default icon) | - String:
"Calendar" - React element:
<CalendarIcon /> - React function:
CalendarIcon
|
| className | Class name(s) that will be added along with "react-daterange-picker" to the main React-DateRange-Picker <div> element. | n/a | - String:
"class1 class2" - Array of strings:
["class1", "class2 class3"]
|
| clearAriaLabel | aria-label for the clear button. | n/a | "Clear value" |
| clearIcon | Content of the clear button. Setting the value explicitly to null will hide the icon. | (default icon) | - String:
"Clear" - React element:
<ClearIcon /> - React function:
ClearIcon
|
| closeCalendar | Whether to close the calendar on value selection. Note: It's recommended to use shouldCloseCalendar function instead. | true | false |
| customInputsForm | form attribute for the custom day, month, and year inputs. Set to an empty string to exclude these inputs from their nearest ancestor form. | n/a | "my-form" |
| data-testid | data-testid attribute for the main React-DateRange-Picker <div> element. | n/a | "daterange-picker" |
| dayAriaLabel | aria-label for the day input. | n/a | "Day" |
| dayPlaceholder | placeholder for the day input. | "--" | "dd" |
| disableCalendar | When set to true, will remove the calendar and the button toggling its visibility. | false | true |
| disabled | Whether the date range picker should be disabled. | false | true |
| format | Input format based on Unicode Technical Standard #35. Supported values are: y, M, MM, MMM, MMMM, d, dd. Note: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | n/a | "y-MM-dd" |
| id | id attribute for the main React-DateRange-Picker <div> element. | n/a | "daterange-picker" |
| isOpen | Whether the calendar should be opened. | false | true |
| locale | Locale that should be used by the date range picker and the calendar. Can be any IETF language tag. Note: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | Server locale/User's browser settings | "hu-HU" |
| maxDate | Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-DateRange-Picker will ensure that no later date is selected. | n/a | Date: new Date() |
| maxDetail | The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be "month", "year", "decade" or "century". | "month" | "year" |
| minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateRange-Picker will ensure that no earlier date is selected. | n/a | Date: new Date() |
| monthAriaLabel | aria-label for the month input. | n/a | "Month" |
| monthPlaceholder | placeholder for the month input. | "--" | "mm" |
| name | Input name prefix. Date from/Date to fields will be named "yourprefix_from" and "yourprefix_to" respectively. | "daterange" | "myCustomName" |
| nativeInputAriaLabel | aria-label for the native date input. | n/a | "Date" |
| onCalendarClose | Function called when the calendar closes. | n/a | () => alert('Calendar closed') |
| onCalendarOpen | Function called when the calendar opens. | n/a | () => alert('Calendar opened') |
| onChange | Function called when the user picks a valid date. If any of the fields were excluded using custom format, new Date(y, 0, 1, 0, 0, 0), where y is the current year, is going to serve as a "base". | n/a | (value) => alert('New date is: ', value) |
| onFocus | Function called when the user focuses an input. | n/a | (event) => alert('Focused input: ', event.target.name) |
| onInvalidChange | Function called when the user picks an invalid date. | n/a | () => alert('Invalid date') |
| openCalendarOnFocus | Whether to open the calendar on input focus. Note: It's recommended to use shouldOpenCalendar function instead. | true | false |
| portalContainer | Element to render the calendar in using portal. | n/a | document.getElementById('my-div') |
| rangeDivider | Divider between date inputs. | "–" | " to " |
| required | Whether date input should be required. | false | true |
| shouldCloseCalendar | Function called before the calendar closes. reason can be "buttonClick", "escape", "outsideAction", or "select". If it returns false, the calendar will not close. | n/a | ({ reason }) => reason !== 'outsideAction' |
| shouldOpenCalendar | Function called before the calendar opens. reason can be "buttonClick" or "focus". If it returns false, the calendar will not open. | n/a | ({ reason }) => reason !== 'focus' |
| showLeadingZeros | Whether leading zeros should be rendered in date inputs. | false | true |
| value | Input value. | n/a | - Date:
new Date(2017, 0, 1) - String:
"2017-01-01" - An array of dates:
[new Date(2017, 0, 1), new Date(2017, 7, 1)] - An array of strings:
["2017-01-01", "2017-08-01"]
|
| yearAriaLabel | aria-label for the year input. | n/a | "Year" |
| yearPlaceholder | aria-label for the year input. | "----" | "yyyy" |
/react-daterange-picker
