Skip to content

Commit f0d4c56

Browse files
Darrkenmartijnrusschen
authored andcommitted
Moment removal (Hacker0x01#1527)
* 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
1 parent 44b8159 commit f0d4c56

File tree

90 files changed

+75212
-37959
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

90 files changed

+75212
-37959
lines changed

README.md

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,13 @@ The package can be installed via NPM:
2020
npm install react-datepicker --save
2121
```
2222

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 React and 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).
2424

2525
```js
26-
import React from "react";
27-
import DatePicker from "react-datepicker";
28-
import moment from "moment";
26+
import React from 'react';
27+
import DatePicker from 'react-datepicker';
2928

30-
import "react-datepicker/dist/react-datepicker.css";
29+
import 'react-datepicker/dist/react-datepicker.css';
3130

3231
// CSS Modules, react-datepicker-cssmodules.css
3332
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';
@@ -36,7 +35,7 @@ class Example extends React.Component {
3635
constructor(props) {
3736
super(props);
3837
this.state = {
39-
startDate: moment()
38+
startDate: new Date()
4039
};
4140
this.handleChange = this.handleChange.bind(this);
4241
}
@@ -89,7 +88,7 @@ You can also include a time picker by adding the showTimeSelect prop
8988
selected={this.state.date}
9089
onChange={this.handleChange}
9190
showTimeSelect
92-
dateFormat="LLL"
91+
dateFormat="Pp"
9392
/>
9493
```
9594

@@ -99,14 +98,22 @@ More examples of how to use the time picker are given on the [main website](http
9998

10099
### Localization
101100

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:
103102

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
106106

107-
Locales can be further configured in moment with various [customization options](http://momentjs.com/docs/#/customization/).
107+
To load an alternate locale:
108108

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' ... />`
110117

111118
## Compatibility
112119

@@ -116,11 +123,11 @@ We're always trying to stay compatible with the latest version of React. We can'
116123

117124
Latest compatible versions:
118125

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
124131

125132
### Browser Support
126133

@@ -142,15 +149,15 @@ The examples are hosted within the docs folder and are ran in the simple app tha
142149

143150
### Keyboard support
144151

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)
154161

155162
## License
156163

0 commit comments

Comments
 (0)