react-dater

A simple datepicker for react

Install

npm install --save react-dater

Usage

import React, { Component } from 'react';
import DatePicker from 'react-dater';
import 'react-dater/dist/index.css';
class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
    };
  }
  render() {
    return (
      <DatePicker
        onChange = {(newDate) => this.setState({ date: newDate })}
      />
    );
  }
}

Props

showMonthYearSeparate - (boolean)

If true, it will show current month and year separately with their own prev/next buttons.

dateFormatCalendar - (string)

The format of header of calendar, the default value is LLL yyyy.

dateFormatInput - (string)

The format of value in input field (or your custom input component).
Default value is MM/dd/yyyy.

onChange - (function)

This function will be invoked when some date is selected.
Default value is a dummy arrow function.

selected - (Date object)

When this prop is set, the calendar will first use its value as currently selected date.

locale - (Locale object)

We have date-fns as dependency, so you can import the locale object from it.
If not provided, the default locale is en-US.

Here is example

import { enGB } from 'date-fns/locale';
...
...
class Example extends Component {
    ...
    render() {
        return (
          <DatePicker
            locale = {enGB}
          ></DatePicker>
        );
    }
}

Browser Support

PopperJS can support modern versions of Chrome, Firefox, Safari and Edge. However, it cannot directly support IE11 or IE9. Therefore, we can add some polyfills to make it work without errors.

Here we assume you use Create-React-App to create your project.
You can follow the official guidelines to use react-app-polyfill

IE11

// These two must be top in src/index.js
import 'react-app-polyfill/stable';
import 'react-app-polyfill/ie11';

IE9

// These two must be top in src/index.js
import 'react-app-polyfill/stable';
// this also includes ie11, so you don't have to include ie11 additionally.
import 'react-app-polyfill/ie9';

For IE9, we need to add polyfill for classList because it isn’t supported by IE9.
Add the following source to a new script tag:
polyfill@1.2.20180112/classList.min.js"">https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20180112/classList.min.js