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
* initial commit, moment replaced with dayjs, tests are WIP
* updating tests to include dayjs locales
* updating doc examples
* starting to convert over to date-fns
* simplified month dropdown
* more function replacements, fixed a while loop
* some locale changes, fixed another while loop
* converting dayjs functions to date-fns
* most functions converted, utc tests failing
* updated localization to use date-fns, removed the few utc methods
* newDate/parseDate and test fixes
* fixed some month dropdown issues, tests
* converting to date-fns 2alpha for better localization support
* all tests passing
* converting some proptypes to dates
* removed moment dependency
* fixed getWeeks so it returns a number
* simplified formatDate function, updating examples
* more example fixes, isTimeInDisabledRange fix
* getStartOfWeek gets locale
* updated docs
* importing individual date-fns functions, formatting
* single quote reverts
* fixed chinese locale case
* clearing up some import description in readme
* updated example date formats
Copy file name to clipboardExpand all lines: README.md
+33-26Lines changed: 33 additions & 26 deletions
Original file line number
Diff line number
Diff line change
@@ -20,14 +20,13 @@ The package can be installed via NPM:
20
20
npm install react-datepicker --save
21
21
```
22
22
23
-
You’ll need to install React, PropTypes, and Moment.js separately since those dependencies aren’t included in the package. Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).
23
+
You’ll need to install Reactand PropTypes separately since those dependencies aren’t included in the package. If you need to use a locale other than the default en-US, you'll also need to import that into your project from date-fns (see Localization section below). Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).
@@ -36,7 +35,7 @@ class Example extends React.Component {
36
35
constructor(props) {
37
36
super(props);
38
37
this.state= {
39
-
startDate:moment()
38
+
startDate:newDate()
40
39
};
41
40
this.handleChange=this.handleChange.bind(this);
42
41
}
@@ -89,7 +88,7 @@ You can also include a time picker by adding the showTimeSelect prop
89
88
selected={this.state.date}
90
89
onChange={this.handleChange}
91
90
showTimeSelect
92
-
dateFormat="LLL"
91
+
dateFormat="Pp"
93
92
/>
94
93
```
95
94
@@ -99,14 +98,22 @@ More examples of how to use the time picker are given on the [main website](http
99
98
100
99
### Localization
101
100
102
-
The date picker relies on [moment.js internationalization](http://momentjs.com/docs/#/i18n/) to localize its display components. By default, the date picker will use the locale globally set in moment, which is English. Locales can be changed in the following ways:
101
+
The date picker relies on [date-fns internationalization](https://date-fns.org/v2.0.0-alpha.18/docs/I18n) to localize its display components. By default, the date picker will use the locale globally set, which is English. Provided are 3 helper methods to set the locale:
103
102
104
-
***Globally** by calling `moment.locale(lang)`
105
-
***Picker-specific** by providing the `locale` prop
103
+
-**registerLocale** (string, object): loads an imported locale object from date-fns
104
+
-**setDefaultLocale** (string): sets a registered locale as the default for all datepicker instances
105
+
-**getDefaultLocale**: returns a string showing the currently set default locale
106
106
107
-
Locales can be further configured in moment with various [customization options](http://momentjs.com/docs/#/customization/).
107
+
To load an alternate locale:
108
108
109
-
_As of version 0.23, the `weekdays` and `weekStart` DatePicker props have been removed. Instead, they can be configured with the `weekdaysMin` and `week.dow` moment locale customization options._
109
+
- Import the helper methods you need: `import { registerLocale, setDefaultLocale } from DatePicker;`
110
+
- Import the locale from date-fns: `import fi from 'date-fns/locale/fi';`
111
+
- Register the locale: `registerLocale('fi', fi);`
112
+
113
+
Locales can be changed in the following ways:
114
+
115
+
-**Globally** - `setDefaultLocale('fi');`
116
+
-**Picker-specific** by providing the `locale` prop - `<DatePicker locale='fi' ... />`
110
117
111
118
## Compatibility
112
119
@@ -116,11 +123,11 @@ We're always trying to stay compatible with the latest version of React. We can'
116
123
117
124
Latest compatible versions:
118
125
119
-
* React 15.5 or newer: All above React-datepicker v.0.40.0
120
-
* React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
121
-
* React 0.14 or newer: All above React-datepicker v0.13.0
122
-
* React 0.13: React-datepicker v0.13.0
123
-
* pre React 0.13: React-datepicker v0.6.2
126
+
- React 15.5 or newer: All above React-datepicker v.0.40.0
127
+
- React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
128
+
- React 0.14 or newer: All above React-datepicker v0.13.0
129
+
- React 0.13: React-datepicker v0.13.0
130
+
- pre React 0.13: React-datepicker v0.6.2
124
131
125
132
### Browser Support
126
133
@@ -142,15 +149,15 @@ The examples are hosted within the docs folder and are ran in the simple app tha
142
149
143
150
### Keyboard support
144
151
145
-
*_Left_: Move to the previous day.
146
-
*_Right_: Move to the next day.
147
-
*_Up_: Move to the previous week.
148
-
*_Down_: Move to the next week.
149
-
*_PgUp_: Move to the previous month.
150
-
*_PgDn_: Move to the next month.
151
-
*_Home_: Move to the previous year.
152
-
*_End_: Move to the next year.
153
-
*_Enter/Esc/Tab_: close the calendar. (Enter & Esc calls preventDefault)
152
+
-_Left_: Move to the previous day.
153
+
-_Right_: Move to the next day.
154
+
-_Up_: Move to the previous week.
155
+
-_Down_: Move to the next week.
156
+
-_PgUp_: Move to the previous month.
157
+
-_PgDn_: Move to the next month.
158
+
-_Home_: Move to the previous year.
159
+
-_End_: Move to the next year.
160
+
-_Enter/Esc/Tab_: close the calendar. (Enter & Esc calls preventDefault)
0 commit comments