Wern Ancheta Fullstack developer, fitness enthusiast, skill toy hobbyist.

Top React date pickers for 2021

8 min read 2327

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

Material UI Date 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

react-day-picker

React day picker

We made a custom demo for .
No really. Click here to check it out.

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

Carbon Design System date picker

carbon design systems 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

wojtekmaj / react-date-picker

Wojtekmaj 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:

airbnb / react-dates

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.

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

React Datepicker by hackerone

Hackerone Date Picker

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

React Rainbow components date picker

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

Ant Design DatePicker

Ant Design Date Picker

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

hypeserver / react-date-range

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

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:

Library Components Stand-alone Date library agnostic TypeScript support
Material UI Date/ Time picker Date, time No Yes No
react-day-picker Date, date range Yes Yes No
Carbon Design Systems date picker Date, time, date range No Yes No
wojtekmaj / react-date-picker Date, time, date range Yes Yes No
airbnb / react-dates Date, date range Yes No (Moment.js) No
React Datepicker by hackerone Date, time, date range Yes No (date-fns) No
React Rainbow components date picker Date, date range, time No Yes Yes
Ant Design DatePicker Date, date range, time No Yes Yes
hypeserver / react-date-range Date, date range Yes No (date-fns) No

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.

Full visibility into 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 is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

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 — .

Wern Ancheta Fullstack developer, fitness enthusiast, skill toy hobbyist.

7 Replies to “Top React date pickers for 2021”

  1. An issue with a lot of these date pickers, or the blame probably lies more on the developer using these, is that the locale isn’t taken into account. As a European, visiting European sites with date pickers, too many are month-day-year with Sunday first, which isn’t how it’s done in Europe.

  2. What are the creteria for “TypeScript support”? For instance, Material-UI date pickers components are written in TypeScript but labelled “No” for this category.

Leave a Reply