Top React date pickers for 2021

As developers, we always look for ways to save time on our projects. That’s why libraries are created so that we don’t get stuck implementing the same thing over and over again. With frontend frameworks like React, it’s easier than ever to share common functionality for different projects.

In this post, I’ll walk you through some of the date picker libraries that I found really useful. Note that we’ll only be going through the libraries which have been updated recently. This is to ensure it will work on your project without going through a lot of hoops.

Material UI Date/Time picker

If you’re using Material UI as the base for the UI components of your project, you will most likely have to use Material UI’s date and time picker as well.

The good thing about this library is that even though you’re constrained with Material Design, it is still very customizable. You can customize the styles via the createMuiTheme() function provided by Material UI.

This is the only component in this list that has a clock view. This makes it very easy to pick the time in both desktop and mobile views.

The examples in the official documentation use date-fns as the datetime library for parsing and formatting dates but you can certainly use the datetime library of your choice. The only downside with this library is that it doesn’t have its own date range picker (on the stable release at least). The date range picker is still on alpha.

The datetime picker doesn’t come with the core Material UI library so you’ll have to install it with the following command:

npm install @material-ui/core date-fns @date-io/[email protected]^1.3.13 @material-ui/pickers --save

You can then use it like so. Note that this is the code for the current stable version of Material UI. It is no longer supported (about a month ago from the time of writing this article). So if you’re reading this at a later date, and the next version of Material UI is already stable then you should use that instead:

import React, { useState } from 'react';
import DateFnsUtils from '@date-io/date-fns';
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker,
} from '@material-ui/pickers';

export default function MaterialDatePicker() {

  const [selectedDate, setSelectedDate] = useState(new Date());

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
        disableToolbar
        variant="inline"
        format="MM/dd/yyyy"
        margin="normal"
        id="date-picker-inline"
        label="Date picker inline"
        value={selectedDate}
        onChange={handleDateChange}
        KeyboardButtonProps={{
          'aria-label': 'change date',
        }}
      />
    </MuiPickersUtilsProvider>
  );

}

Features

• Follows Material UI design
• Date/time picker
• Date library agnostic
• Localizable

Resources

• Material UI Date/Time pickers

react-day-picker

This is the simplest library among the bunch. Pick this date picker if you’re looking for a lightweight library for your project. Don’t be fooled by its size, as it can provide all the common functionalities that date pickers usually need and more. Its base style is very simple which makes it easy to customize. It comes with its own date utilities for working with dates and localizing them. Though you can use your date library of choice if you want to.

The best part about this library is that it has an extensive list of examples for almost anything that you can do with it. For example, you can mark specific days as disabled or select a date range on click.

You can install it like so:

npm install react-day-picker --save

Once installed, here’s how you can use it:

import React, { useState } from "react";
import DayPickerInput from "react-day-picker/DayPickerInput";
import "react-day-picker/lib/style.css";

export default function ReactDayPicker() {
  const [date, setDate] = useState(new Date());

  function onChange(date) {
    setDate(date);
  }

  return <DayPickerInput onDayChange={onChange} />;
}

Features

• Date range picker
• Calendar and text field input
• Localizable
• Customizable
• Comes with its own date utilities

Resources

• react-day-picker

Carbon Design System date picker

Carbon is IBM’s open-source design system. It uses IBM’s Design Language as its foundation. It’s pretty much the IBM equivalent of Material Design Guidelines from Google. But unlike Material UI which is only available for React, Carbon also supports Vue, Angular, Svelte, and even vanilla JavaScript. So if you want to adopt Carbon Design for your next project, then you can use this date picker. Otherwise, skip it.

At its core, it’s a design system so it really gives a huge focus on the consistency of design. Things like the alignment of various elements, and how the various states should look is given utmost priority.

The downside to this library is that it doesn’t have a datetime picker component. It also allows the user to input dates manually. This is oftentimes prone to mistake so you’ll have to implement the validation yourself. Under the hood, it uses flatpickr so you can customize it fully by using flatpickr options.

You can install it like this:

npm install carbon-components carbon-components-react carbon-icons --save

Then use it like so:

import React from 'react';
import { DatePickerInput } from 'carbon-components-react';

export default function CarbonDatePicker() {

  return (
    <DatePickerInput
        placeholder="mm/dd/yyyy"
        labelText="Date Picker label"
        id="date-picker-single"
        onChange={date => {
          console.log(date);
        }}
      />
    </DatePicker>  
  );
}

Refer to the flatpickr docs as the documentation because Carbon isn’t that great.

Features

• Consistent design
• Date, time, date range picker
• Localizable

Resources

• Carbon Design System
• Carbon Design System date picker
• Date Picker API
• flatpickr

wojtekmaj / react-date-picker

One of the lightweight libraries in this list. This date picker doesn’t depend on any date library in order to work. It has a customizable calendar view so you can have a month, year, decade, and even a century view.

The downside of this library is the lack of usage samples. It only has a usage sample for its most common use case. If your use case isn’t very common, you’ll need to dig through the prop documentation.

You can install it with the following command:

npm install react-date-picker --save

You can then use it like so:

import React, { useState } from 'react';
import DatePicker from 'react-date-picker';

export default function MyDatePicker() {
  const [value, updateValue] = useState(new Date());

  const onChange = (date) => {
    updateValue(date);
  }

  return (
    <div>
      <DatePicker
        onChange={onChange}
        value={value}
      />
    </div>
  );
}

Features

• Date, time, picker, and date range picker
• Localizable
• No date library dependency

Resources

The developer who made this library has separated the related functionality such as time picker, datetime picker, and date range picker into their own package. Be sure to check them out if you need more than just a date picker:

• wojtekmaj / react-date-picker
• wojtekmaj / react-time-picker
• wojtekmaj / react-daterange-picker
• wojtekmaj / react-datetime-picker

airbnb / react-dates

Airbnb’s React Dates is one of the older libraries on this list. But even though that’s the case, it’s still actively being maintained. Its localizable, mobile-friendly, and built with accessibility in mind. It relies on Moment.js for working with dates so it’s a bit heavy compared to the lightweight libraries on this list.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

The biggest downside of this library is that they don’t have proper documentation and usage samples. All they have is a Storybook and a few examples on their GitHub repo. So if you’re someone who is fairly new to React, or you don’t like digging through the code a lot, you can probably skip this one.

You can install it with the following command:

npm install react-dates --save

Then use it like so:

import React, { useState } from "react";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import { SingleDatePicker } from "react-dates";

export default function ReactdatesDatepicker() {
  const [date, setDate] = useState(null);
  const [isFocused, setIsFocused] = useState(false);

  function onDateChange(date) {
    setDate(date);
  }

  function onFocusChange({ focused }) {
    setIsFocused(focused);
  }

  return (
    <SingleDatePicker
      id="date_input"
      date={date}
      focused={isFocused}
      onDateChange={onDateChange}
      onFocusChange={onFocusChange}
    />
  );
}

Features

• Date, date range picker
• Localizable
• Mobile-friendly
• Accessible

Resources

• airbnb / react-dates
• react-dates story book

React Datepicker by hackerone

A simple and reusable date picker component.

The great thing about this library is that its documentation has examples of all the use cases you can think of. Things like using custom class names, highlighting specific days, and adding date and time filters all have corresponding examples. Their examples also use vanilla JavaScript which means that the developer can use any date library for date manipulation. It uses date-fns for localization though.

The downside with this library is that it’s default UI doesn’t look that great. It’s built to be simple, thus it assumes that the developer will have to customize the styles on their own.

You can install it with the following command:

npm install react-datepicker --save

You can then use it like so:

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function HackeroneDatepicker() {
  const [date, setDate] = useState(new Date());

  function onChange(date) {
    setDate(date);
  }

  return <DatePicker selected={date} onChange={onChange} />;
}

Features

• Date, time, date range picker
• Customizable
• Accessible
• Localizable

Resources

• Hacker0x01 / react-datepicker
• React Datepicker

React Rainbow components date picker

React Rainbow is a UI components library just like Material UI. So if you’re already using React Rainbow then you’ll most likely be stuck using its date and time components. Otherwise, you’ll have to adopt the whole library to use it. It has a date picker, a datetime picker, and a date picker modal.

The main disadvantage with this library is that it’s components cannot be installed individually so you have to be using the whole UI library in order to use its date and time picker components.

Another disadvantage is that it’s very opinionated about how the components should look and function. For example, you can’t have an inline date picker as everything needs to be in a modal.

You can install it with the following command:

npm install react-rainbow-components --save

The datepicker can then be used like so:

import React, { useState } from "react";
import { DatePicker } from "react-rainbow-components";

export default function RainbowDatepicker() {
  const [date, setDate] = useState(null);

  function onChange(date) {
    setDate(date);
  }

  return (
    <DatePicker
      id="datePicker-1"
      value={date}
      onChange={onChange}
      label="DatePicker Label"
      formatStyle="large"
    />
  );
}

Features

• Date, date range, time picker
• Localizable
• Accessible
• TypeScript support

Resources

• DatePicker
• DateTimePicker
• DatePickerModal

Ant Design DatePicker

Just like React Rainbow, the date and time picker comes packaged with the whole UI component library itself. It follows the Ant Design Specifications so there’s really a huge focus on the consistency of the design to provide better user experiences. This means that you’ll only get the full benefit of using this component if you also use the whole UI component library.

By default, the date picker uses Moment.js for working with dates. But they also provide a way to use another one which is great, especially if you’re concerned about the bundle size.

Another great thing about it (and all of Ant Design’s components) is that they provide editable demos via CodeSandbox, CodePen, and StackBlitz. This makes it really easy to try them out by simply forking their demo.

You can install it with the following command:

npm install antd --save

Once installed, you can use it like so:

import React, { useState } from "react";
import { DatePicker } from "antd";
import "antd/dist/antd.css";

export default function AntDatepicker() {
  const [date, setDate] = useState(new Date());

  function onChange(date, dateString) {
    setDate(date);
  }

  return <DatePicker onChange={onChange} />;
}

Features

• Date, date range, and time picker
• Comes with a UI component library
• TypeScript support
• Localizable
• Date library agnostic

Resources

• Datepicker
• Timepicker

hypeserver / react-date-range

If you’re looking for a nice-looking date range picker with little to no CSS customization on your part, then this package is for you. But even though that’s the case, this library is still highly customizable. The only downside is that the docs and examples can use a little improvement. So if you’re looking to implement some uncommon date range picker functionality, then you might have a bit of trouble.

You can install it with the following command. The GitHub repo mentioned that it’s a date library agnostic date picker but it has marked the date-fns library as a peer dependency so you also have to install it on your project:

npm install react-date-range date-fns --save

You can then use it like so:

import React, { useState } from "react";
import { Calendar } from "react-date-range";
import "react-date-range/dist/styles.css";
import "react-date-range/dist/theme/default.css";

export default function HypeserverDatepicker() {
  const [date, setDate] = useState(new Date());

  function onChange(date) {
    setDate(date);
  }

  return <Calendar date={date} onChange={onChange} />;
}

Features

• Date range picker
• Calendar input
• Accessible
• Click and hold selection

Resources

• hypeserver / react-date-range

Comparison

Here’s a comparison table of all the libraries. Note that all of the libraries in this list are customizable, accessible, and localizable so I excluded those features from the table below:

Conclusion

That’s it for this roundup of date picker libraries. As you have seen, there are many date picker libraries you can choose from. Some include their own time picker component while some only have a date picker component. Some are simple with only the basic date picker functionality, while some have a lot of options you can use to customize the user experience. Lastly, there are those that integrate nicely with big UI component libraries such as Material UI and Ant Design.

If you’ve used a great date picker library that’s not on the list above, please let us know in the comments below.

LogRocket: Full visibility into your production React apps

Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket combines session replay, product analytics, and error tracking – empowering software teams to create the ideal web and mobile product experience. What does that mean for you?

Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay problems as if they happened in your own browser to quickly understand what went wrong.

No more noisy alerting. Smart error tracking lets you triage and categorize issues, then learns from this. Get notified of impactful user issues, not false positives. Less alerts, way more useful signal.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — start monitoring for free.