<p align="center">
  <img width="350" height="150" src="https://user-images.githubusercontent.com/12694685/103485210-07e97a00-4df5-11eb-80cc-c4e6bc78d680.png"/>
</p>

<h3 align="center">
  Simple and Customizable DatePicker, DateRangePicker and TimePicker.
</h3>

<br/>

![npm](https://img.shields.io/npm/v/react-next-dates?style=flat-square)
![NPM](https://img.shields.io/npm/l/react-next-dates?style=flat-square)
![npm](https://img.shields.io/npm/dm/react-next-dates?style=flat-square)

# Installation

`React Next Dates` is available on [NPM](https://www.npmjs.com/package/react-next-dates).

For date operations and translations, React Next Dates use [date-fns](https://date-fns.org/) as peerDependencies. Don't forget to install it.

## Install package

### With NPM :

```sh
npm install react-next-dates date-fns --save
```

### With Yarn :

```sh
yarn add react-next-dates date-fns
```

### Peer Dependencies

| Library   | Version  |
| --------- | -------- |
| date-fns  | `^2.0.0` |
| react     | `>=16`   |
| react-dom | `>=16`   |

## Add styles

Don't forget to inject stylesheet on your app.

### CSS

```js
import 'react-next-dates/dist/style.css';
```

### Sass

```js
import 'react-next-dates/dist/style.scss';
```

> See [Theming Section](https://sylcastaing.github.io/react-next-dates/docs/documentation-theming--page)

# Documentation

All documentation is available on [StoryBook](https://sylcastaing.github.io/react-next-dates).

**Quick links** :

- [Installation](https://sylcastaing.github.io/react-next-dates/docs/documentation-installation--page)
- [Theming](https://sylcastaing.github.io/react-next-dates/docs/documentation-theming--page)
- [Customization](https://sylcastaing.github.io/react-next-dates/docs/documentation-customization)
- [DatePicker](https://sylcastaing.github.io/react-next-dates/docs/components-datepicker)
- [DateRangePicker](https://sylcastaing.github.io/react-next-dates/docs/components-daterangepicker)
- [TimePicker](https://sylcastaing.github.io/react-next-dates/docs/components-timepicke)

# Development

This library was created with [dts](https://weiran-zsd.github.io/dts-cli)

# Credits

React Next Dates is highly inspired by :

- [React Nice Dates](https://reactnicedates.hernansartorio.com/)
- [Jquery Clock TimePicker](https://github.com/loebi-ch/jquery-clock-timepicker)
