autoFocus | Automatically focuses the input on mount. | n/a | true |
calendarAriaLabel | aria-label for the calendar button. | n/a | "Toggle calendar" |
calendarClassName | Class name(s) that will be added along with "react-calendar" to the main React-Calendar <div> element. | n/a | - String:
"class1 class2" - Array of strings:
["class1", "class2 class3"]
|
calendarIcon | Content of the calendar button. Setting the value explicitly to null will hide the icon. | (default icon) | - String:
"Calendar" - React element:
<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 />
|
closeCalendar | Whether to close the calendar on value selection. | true | false |
data-testid | data-testid attribute for the main React-DateRange-Picker <div> element. | n/a | "date-picker" |
dayAriaLabel | aria-label for the day input. | n/a | "Day" |
dayPlaceholder | placeholder for the day input. | "--" | "dd" |
disabled | Whether the date range picker should be disabled. | false | true |
disableCalendar | When set to true , will remove the calendar and the button toggling its visibility. | false | true |
format | Input format based on Unicode Technical Standard #35. Supported values are: y , M , MM , MMM , MMMM , d , dd . | n/a | "y-MM-dd" |
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. | 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() |
minDetail | The least detailed calendar view that the user shall see. Can be "month" , "year" , "decade" or "century" . | "century" | "decade" |
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 focuses an input. | n/a | (event) => alert('Focused input: ', event.target.name) |
openCalendarOnFocus | Whether to open the calendar on input focus. | 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 |
showLeadingZeros | Whether leading zeros should be rendered in date inputs. | false | true |
value | Input value. | n/a | - Date:
new Date() - An array of dates:
[new Date(2017, 0, 1), new Date(2017, 7, 1)]
|
yearAriaLabel | aria-label for the year input. | n/a | "Year" |
yearPlaceholder | aria-label for the year input. | "----" | "yyyy" |