Skip to content

Commit

Permalink
Moment removal (#1527)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
Darrken authored and martijnrusschen committed Nov 17, 2018
1 parent 44b8159 commit f0d4c56
Show file tree
Hide file tree
Showing 90 changed files with 75,212 additions and 37,959 deletions.
59 changes: 33 additions & 26 deletions README.md
Expand Up @@ -20,14 +20,13 @@ The package can be installed via NPM:
npm install react-datepicker --save
```

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

```js
import React from "react";
import DatePicker from "react-datepicker";
import moment from "moment";
import React from 'react';
import DatePicker from 'react-datepicker';

import "react-datepicker/dist/react-datepicker.css";
import 'react-datepicker/dist/react-datepicker.css';

// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';
Expand All @@ -36,7 +35,7 @@ class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate: moment()
startDate: new Date()
};
this.handleChange = this.handleChange.bind(this);
}
Expand Down Expand Up @@ -89,7 +88,7 @@ You can also include a time picker by adding the showTimeSelect prop
selected={this.state.date}
onChange={this.handleChange}
showTimeSelect
dateFormat="LLL"
dateFormat="Pp"
/>
```

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

### Localization

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

* **Globally** by calling `moment.locale(lang)`
* **Picker-specific** by providing the `locale` prop
- **registerLocale** (string, object): loads an imported locale object from date-fns
- **setDefaultLocale** (string): sets a registered locale as the default for all datepicker instances
- **getDefaultLocale**: returns a string showing the currently set default locale

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

_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._
- Import the helper methods you need: `import { registerLocale, setDefaultLocale } from DatePicker;`
- Import the locale from date-fns: `import fi from 'date-fns/locale/fi';`
- Register the locale: `registerLocale('fi', fi);`

Locales can be changed in the following ways:

- **Globally** - `setDefaultLocale('fi');`
- **Picker-specific** by providing the `locale` prop - `<DatePicker locale='fi' ... />`

## Compatibility

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

Latest compatible versions:

* React 15.5 or newer: All above React-datepicker v.0.40.0
* React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
* React 0.14 or newer: All above React-datepicker v0.13.0
* React 0.13: React-datepicker v0.13.0
* pre React 0.13: React-datepicker v0.6.2
- React 15.5 or newer: All above React-datepicker v.0.40.0
- React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
- React 0.14 or newer: All above React-datepicker v0.13.0
- React 0.13: React-datepicker v0.13.0
- pre React 0.13: React-datepicker v0.6.2

### Browser Support

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

### Keyboard support

* _Left_: Move to the previous day.
* _Right_: Move to the next day.
* _Up_: Move to the previous week.
* _Down_: Move to the next week.
* _PgUp_: Move to the previous month.
* _PgDn_: Move to the next month.
* _Home_: Move to the previous year.
* _End_: Move to the next year.
* _Enter/Esc/Tab_: close the calendar. (Enter & Esc calls preventDefault)
- _Left_: Move to the previous day.
- _Right_: Move to the next day.
- _Up_: Move to the previous week.
- _Down_: Move to the next week.
- _PgUp_: Move to the previous month.
- _PgDn_: Move to the next month.
- _Home_: Move to the previous year.
- _End_: Move to the next year.
- _Enter/Esc/Tab_: close the calendar. (Enter & Esc calls preventDefault)

## License

Expand Down

0 comments on commit f0d4c56

Please sign in to comment.