A simple datepicker inspired by Pikaday Sample in 2020

A simple datepicker inspired by Pikaday Sample in 2020

tutorials -


A simple datepicker inspired by Pikaday.



yarn add react-daypicker


npm install --save react-daypicker

Agnostic building block

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


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:

  active={moment().add(1, 'day')}
  onDayClick={(day) => this.setState({ day })}

Note that active is expected to be an instance of moment from Moment.js.

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.



  • React
  • moment
  • classnames


See package.json for details but simply run:

npm run build


Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff