react-daypicker

react-daypicker

A simple datepicker inspired by Pikaday.

v3.0.0 is a breaking change

With v3.0.0, all external dependencies are removed except react (as a peer). That means for you as a consumer that the active prop which was a moment date is now expected to be a vanilla JavaScript date. However, for date equality reasons, active is expected to be a day so you must pass in a Date instance with no more accuracy beyond date set.

Example:

<DayPicker active={new Date(2018, 11, 1)} />

(remember with JavaScript, months start at 0 so 11 is December)

Installation

Agnostic building block

Note that this component does not draw any border around itself or handle popping up. That is up to you. I am using it with react-bootstrap v3 and it my usage looks like this:

npm

npm install --save react-daypicker

yarn

yarn add react-daypicker

Usage

import 'react-daypicker/lib/DayPicker.css';
import DayPicker from 'react-daypicker';

The only required property is onDayClick which is called when a day is clicked.

<DayPicker onDayClick={(day) => this.setState({ day })} />

An optional property active can be added in order to mark a day as active:

<DayPicker
  active={new Date(2018, 11, 1)}
  onDayClick={(day) => this.setState({ day })}
/>

Note that active is expected to be an instance of Date. In prior version of this component, it was expected to be a Moment.js wrapped date but that is no longer the case.

Options on styling

You can import the Sass stylesheet instead:

import 'react-daypicker/src/DayPicker.scss';

The root element is .react-daypicker-root. The default styling is intentionally monochrome and basic so that you can drop it into your project without having to fiddle with styles right away.

This is likely to change in the future with a probable move to styled-components or something similar.

Dependencies

Peer

• React

Developing

See package.json for details but simply run npm run watch (if changing code, doesn't work for styles yet) or npm run build.