You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+28-28Lines changed: 28 additions & 28 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -92,34 +92,34 @@ Displays an input field complete with custom inputs, native input, and a calenda
92
92
93
93
#### Props
94
94
95
-
|Prop name|Description|Example values|
96
-
|----|----|----|
97
-
|calendarAriaLabel|Defines the `aria-label` for the calendar button.|`"Toggle clock"`|
98
-
|calendarClassName|Defines class name(s) that will be added along with "react-calendar" to the main React-Calendar `<div>` element.|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
99
-
|calendarIcon|Defines the content of the calendar button. Setting the value explicitly to `null` will hide the icon.|<ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li></ul>|
100
-
|className|Defines class name(s) that will be added along with "react-date-picker" to the main React-Date-Picker `<div>` element.|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
101
-
|clearAriaLabel|Defines the `aria-label` for the clear button.|`"Clear value"`|
102
-
|clearIcon|Defines the content of the clear button. Setting the value explicitly to `null` will hide the icon.|<ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul>|
103
-
|dayAriaLabel|Defines the `aria-label` for the day input.|`"Year"`|
104
-
|disabled|Defines whether the date picker should be disabled. Defaults to false.|`true`|
105
-
|format|Defines input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `y`, `M`, `MM`, `MMM`, `MMMM`, `d`, `dd`.|`"y-MM-dd"`|
106
-
|isOpen|Defines whether the calendar should be opened. Defaults to false.|`true`|
107
-
|locale|Defines which locale should be used by the date picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). Defaults to user's browser settings.|`"hu-HU"`|
108
-
|maxDate|Defines maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-Date-Picker will ensure that no later date is selected.|Date: `new Date()`|
109
-
|maxDetail|Defines 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". Defaults to "month".|`"month"`|
110
-
|minDate|Defines minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Date-Picker will ensure that no earlier date is selected.|Date: `new Date()`|
111
-
|minDetail|Defines the least detailed calendar view that the user shall see. Can be "month", "year", "decade" or "century". Defaults to "century".|`"century"`|
112
-
|monthAriaLabel|Defines the `aria-label` for the month input.|`"Month"`|
113
-
|name|Defines input name. Defaults to "date".|`"myCustomName"`|
114
-
|nativeInputAriaLabel|Defines the `aria-label` for the native date input.|`"Date"`|
115
-
|onCalendarClose|Function called when the calendar closes.|`() => alert('Calendar closed')`|
116
-
|onCalendarOpen|Function called when the calendar opens.|`() => alert('Calendar opened')`|
117
-
|onChange|Function called when the user clicks an item on the most detailed view available.|`(value) => alert('New date is: ', value)`|
118
-
|required|Defines whether date input should be required. Defaults to false.|`true`|
119
-
|returnValue|Defines which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be "start", "end" or "range". The latter will cause an array with start and end values to be passed. Defaults to "start".|`"range"`|
120
-
|showLeadingZeros|Defines whether leading zeros should be rendered in date inputs. Defaults to false.|`true`|
121
-
|value|Defines the value of the input.|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li></ul>|
122
-
|yearAriaLabel|Defines the `aria-label` for the year input.|`"Year"`|
|calendarAriaLabel|`aria-label` for the calendar button.|n/a|`"Toggle clock"`|
98
+
|calendarClassName|Class name(s) that will be added along with "react-calendar" to the main React-Calendar `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
99
+
|calendarIcon|Content of the calendar button. Setting the value explicitly to `null` will hide the icon.| (default icon)|<ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li></ul>|
100
+
|className|Class name(s) that will be added along with `"react-date-picker"` to the main React-Date-Picker `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
101
+
|clearAriaLabel|`aria-label` for the clear button.|n/a|`"Clear value"`|
102
+
|clearIcon|Content of the clear button. Setting the value explicitly to `null` will hide the icon.|(default icon)|<ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul>|
103
+
|dayAriaLabel|`aria-label` for the day input.|n/a|`"Year"`|
104
+
|disabled|Whether the date picker should be disabled.|`false`|`true`|
105
+
|format|Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `y`, `M`, `MM`, `MMM`, `MMMM`, `d`, `dd`.|n/a|`"y-MM-dd"`|
106
+
|isOpen|Whether the calendar should be opened.|`false`|`true`|
107
+
|locale|Locale that should be used by the date picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag).|User's browser settings.|`"hu-HU"`|
108
+
|maxDate|Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-Date-Picker will ensure that no later date is selected.|n/a|Date: `new Date()`|
109
+
|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"`|
110
+
|minDate|Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Date-Picker will ensure that no earlier date is selected.|n/a|Date: `new Date()`|
111
+
|minDetail|The least detailed calendar view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`|`"century"`|`"decade"`|
112
+
|monthAriaLabel|`aria-label` for the month input.|n/a|`"Month"`|
113
+
|name|Input name.|`"date"`|`"myCustomName"`|
114
+
|nativeInputAriaLabel|`aria-label` for the native date input.|n/a|`"Date"`|
115
+
|onCalendarClose|Function called when the calendar closes.|n/a|`() => alert('Calendar closed')`|
116
+
|onCalendarOpen|Function called when the calendar opens.|n/a|`() => alert('Calendar opened')`|
117
+
|onChange|Function called when the user clicks an item on the most detailed view available.|n/a|`(value) => alert('New date is: ', value)`|
118
+
|required|Whether date input should be required.|`false`|`true`|
119
+
|returnValue|Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be "start", "end" or "range". The latter will cause an array with start and end values to be passed.|`"start"`|`"range"`|
120
+
|showLeadingZeros|Whether leading zeros should be rendered in date inputs.|`false`|`true`|
121
+
|value|Input value.|n/a|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li></ul>|
122
+
|yearAriaLabel|`aria-label` for the year input.|n/a|`"Year"`|
0 commit comments