deji adesoga

Posted on Mar 10, 2021 • Originally published at thecodeangle.com

Top 10 Date Pickers in React

#react #javascript #webdev #tutorial

- Helen Keller

Table of Content

Introduction
10). @ y0c/react-datepicker
9). materialui-daterange-picker
8). React-DateTime-Picker
7). react-date-range
6). react-date-picker
5). react-big-calendar
4). react-datetime
3). react-day-picker
2). @material-ui/pickers
1). React Date Picker
Conclusion

Introduction

A Date Picker is a form of graphical user interface that allows users to select a date from a calendar and/or time from a time range. The common practice in which a date picker is implemented is by providing a text-box field, which when clicked upon to enter a date, displays a pop-up calendar, such that when one of the characters on the calendar is selected, it displays the value inside the text input field.

Some of the advantages of using a date picker include:

Entering dates becomes easier for the user and you can control the format of the data you receive.
Only valid dates can be entered.
Dates are properly formated to avoid confusion.
Date Pickers can help users out by including common holidays, for instance depending on the country chosen and integration of their own calendar.
Making the user enter a date by merely clicking on a date in the pop-up calendar as opposed to having to take their hand off the mouse to type in a date, reducing the chances of error in the process.

In this tutorial, we will take a look at the top ten date pickers in react, using the estimated weekly downloads from the least number to the most on NPM.

10). @ y0c/react-datepicker

This date picker is a flexible, reusable, mobile-friendly DatePicker component for React. Its previous versions rely on moment.js, but now it is changed to Day.js because of bundle size issues.

Brief Overview:

Version

1.0.4

License

MIT

Estimated-Weekly -Downloads

677

Unpacked-size

154kb

Link To Repository

@yoc/react-date picker

Code Demo / Example

In this short tutorial, I'll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i @y0c/react-datepicker

Step 2

import React from "react";
import { DatePicker, RangeDatePicker } from "@y0c/react-datepicker";
import "@y0c/react-datepicker/assets/styles/calendar.scss";

const YocReactDatePicker = () => {
  const onChangeValue = (date) => {
    const dateValue = date.toDate();
    console.log(dateValue);
  };

  const onChangeRangeValue = (title) => (...date) => console.log(date);

  return (
    <div>
      <h1>YOC DatePicker Example</h1>
      <DatePicker onChange={onChangeValue} />

      <br />
      <br />
      <h1>YOC Date Range Picker Example</h1>
      <RangeDatePicker onChange={onChangeRangeValue("date")} />
    </div>
  );
};

export default YocReactDatePicker;

What we did here was to create a new file. After this, we had to import React, DatePicker, RangeDatePicker as well as the assets for the CSS.

Next, we created a functional component that has two variables. The first one is called onChangeValue which takes in an argument, while the second one is called onChangeRangeValue. These variables allow us to log the data for the date in the console.

Finally in our code, we display the date pickers by calling both the and the that was imported earlier.

Each one has an onChange prop that takes in the variables that we created earlier.

Result

Possible Errors

There is a chance you may get an error that says, ERROR Cannot find module 'node-sass'. All you have to do when you get this error message is to run the command npm install node-sass in your terminal or command line.

9). materialui-daterange-picker

This is a react date range picker that makes use of @material-ui. Material-UI is the most popular React component library, with millions of users worldwide.

Brief Overview:

Version

1.1.92

License

MIT

Estimated-Weekly -Downloads

5,135

Unpacked-size

1.12 MB

Link To Repository

materialui-daterange-picker

Code Demo / Example

In this short tutorial, I'll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i materialui-daterange-picker

Step 2

import React from "react";
import { DateRangePicker } from "materialui-daterange-picker";

const MaterialUiDateRange = () => {
  const [open, setOpen] = React.useState(true);

  const toggle = () => {
    setOpen(open);
  };


  const setDateRange = (date) => {
    console.log(date.startDate, date.endDate);
    alert(date.startDate, date.endDate);
  };
  return (
    <div>
      <h1>Material UI Date Range</h1>
      <DateRangePicker
        open={open}
        toggle={toggle}
        onChange={(date) => setDateRange(date)}
      />
    </div>
  );
};

export default MaterialUiDateRange;

Here we import React and the DateRangePicker as expected. Then we created a functional component. In this component, we declared a React hook called useState that takes in a variable(open) and a function(setOpen).

We state the useState to true by default because that is how our date picker will get displayed on the page.

Next up, we assigned an anonymous function to a variable called toggle. This makes sure that our date picker is always open no matter the state.

We then create another variable called setDateRange. This variable takes in an anonymous function that logs and alert the value of the date selected. We get the value for both the start date and the end date.

Finally in our return, we assign each props in the <DateRangePicker /> component to each of the variables.

Result

8). React-DateTime-Picker

This is a fast, lightweight and easy to style date picker that only provides support for modern browsers. It is only compatible with 16.3 or later. If you use an older version of React, please refer to the table below to find a suitable React-DateTime-Picker version.

React version	Newest compatible React-DateTime-Picker version
≥16.3	latest
≥16.0	2.x

Brief Overview:

Version

3.1.0

License

MIT

Estimated-Weekly -Downloads

20,973

Unpacked-size

193 kB

Link To Repository

react-datetime-picker

Code Demo / Example

In this short tutorial, I’ll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i react-datetime-picker

Step 2

import React, { useState } from 'react';
import DateTimePicker from 'react-datetime-picker';

const ReactDateTimePicker = () => {

  const [value, onChange] = useState(new Date());

  const getDateValue = (value) => {
    onChange(value)
    console.log(value)
    alert(value)
  }


  return (
    <div>
      <h2>React Date Time Picker</h2>
      <DateTimePicker
        onChange={getDateValue}
        value={value}
      />
    </div>
  )
}

export default ReactDateTimePicker

From the above, we import React, useState and DateTimePicker, then we created a functional component. Then we declared a React hook called useState that takes in a variable(value) and a function(onChange).

The value takes in the value of the current date which will be displayed by default in the input field.

Next up we created a variable called getDateValue. This variable takes in an anonymous function that enables us to log and alert the value of the selected date. Also, the onChange function is called inside the anonymous function, this makes the date values in the input field change based on the date that was selected.

Lastly, in our return, we pass in the variables to the props inside the component.

Result

7). react-date-range

This is a React Date Picker component for choosing dates and date ranges. It makes use of date-fns for date operations. Some of the qualities of this date picker include:

Stateless date operations
Highly configurable
Multiple range selection
Based on native js dates
Drag n Drop selection
Keyboard friendly

Brief Overview:

Version

1.1.3

License

MIT

Estimated-Weekly -Downloads

63,883

Unpacked-size

1.92 MB

Link To Repository

react-date-range

Code Demo / Example

In this short tutorial, I’ll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i react-date-range

Step 2

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

const ReactDateRange = () => {

  const handleSelect = (date) => {
    console.log(date);
    alert(date);
  };


  return (
    <div>
      <h2>React Date Range</h2>
      <Calendar date={new Date()} onChange={handleSelect} />
    </div>
  );
};

export default ReactDateRange;

The first thing we did was import React, the CSS files for the theme and also the necessary component from react-date-range.

Next, we created a function called handleSelect, that helps log the date values to the console.

Finally, in our return, our first component called we declared some props and assigned some variables to it. The first is the date prop that takes in a new Date value, second is the onChange prop that takes in the handleSelect variable that logs out the date values to the console.

Result

6). react-date-picker

This is a fast, lightweight and easy to style date picker that only provides support for modern browsers. With this date picker you can pick days, months, years, or even decades.

It is only compatible with 16.3 or later. If you use an older version of React, please refer to the table below to find a suitable React-DateTime-Picker version.

React version	Newest compatible React-Date-Picker version
≥16.3	latest
≥16.0	7.x

Brief Overview:

Version

8.0.7

License

MIT

Estimated-Weekly -Downloads

78,779

Unpacked-size

209 kB

Link To Repository

react-date-picker

Code Demo / Example

In this short tutorial, I’ll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i react-date-picker

Step 2

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

const ReactDatePicker = () => {
  const [value, onChange] = useState(new Date());

  const dateValue = (range) => {
    onChange(range)
    console.log(range);
    alert(value);
  };

  return (
    <div>
      <h2>React Date Picker</h2>
      <DatePicker onChange={dateValue} value={value} />
    </div>
  );
};

export default ReactDatePicker;

From the above, we import React, useState and DatePicker, then we created a functional component. Next, we declared a React hook called useState that takes in a variable(value) and a function(onChange).

The value takes in the result of the current date which will be displayed by default in the input field.

Next up we created a variable called dateValue . This variable takes in an anonymous function that enables us to log and alert the value of the selected date. Also, the onChange function is called inside the anonymous function, this makes the date values in the input field change based on the date that was selected.

Lastly, in our return, we pass in the variables to the props inside the <DatePicker /> component.

Result

5). react-big-calendar

This is an events calendar component built for React and made for modern browsers (read: IE10+) and uses flexbox over the classic tables-based approach.

react-big-calendar makes use of three options for handling the date formatting and culture localization, depending on your preference of DateTime libraries. You can use either the Moment.js, Globalize.js or date-fns localizers.

Brief Overview:

Version

0.32.0

License

MIT

Estimated-Weekly -Downloads

126,292

Unpacked-size

1.13 MB

Link To Repository

react-date-calendar

Code Demo / Example

In this short tutorial, I’ll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i react-big-calendar

Step 2

import React from "react";
import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";
import "react-big-calendar/lib/css/react-big-calendar.css";

const ReactBigCalendar = () => {
  moment.locale("en-GB");
  const localizer = momentLocalizer(moment);

  const myEventsList = [
    {
      start: moment().toDate(),
      end: moment().add(1, "days").toDate(),
      title: "Play Nintendo Switch",
    }
  ];

  return (
    <div>
      <h2>React Big Calendar</h2>
      <Calendar
        localizer={localizer}
        events={myEventsList}
      />
    </div>
  );
};
export default ReactBigCalendar;

From the above, we import React, the necessary dependencies from react-big-calendar, moment.js as well as the needed CSS assets.

Next up we set the structure for moment.js, after which we declare a variable called myEventsList. This variable contains an array of objects that sets a start-date, end-date as well as the title of the event to take place on those days.

Finally, we return our <Calendar /> component which contains the props in which we passed the date and also the list of events.

Results

4). react-datetime

This Date-Picker can be used as a date picker, time picker or both at the same time. It is highly customizable and it even allows to edit date's milliseconds.

Brief Overview:

Version

3.0.4

License

MIT

Estimated-Weekly -Downloads

207,604

Unpacked-size

296 kB

Link To Repository

react-datetime

Code Demo / Example

In this short tutorial, I’ll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i react-datetime

Step 2

import React from "react";
import "react-datetime/css/react-datetime.css";
import Datetime from "react-datetime";

const ReactDateTime = () => {
  let setDateTime = (e) => {
    const dateValue = e.toDate();
    console.log(dateValue);
    alert(dateValue)
  };
  return (
    <div>
      <h2>React Date Time</h2>
      <Datetime value={setDateTime} input={false} onChange={setDateTime} />
    </div>
  );
};

export default ReactDateTime;

Here we import React, the CSS assets and Datetime from the react-datetime library.

Inside our functional component, we created a variable called setDateTime. This variable takes in an anonymous function that will display the values of the date both inside the browser console and the alert box.

Finally, in our return, we create our <Datetime /> component and assign the necessary props to it, which makes our date-picker functional.

Results

3). react-day-picker

This is a date-picker that is highly customizable, localizable, with ARIA support, no external dependencies.

Brief Overview:

Version

7.4.8

License

MIT

Estimated-Weekly -Downloads

454,148

Unpacked-size

686 kB

Link To Repository

react-day-picker

Code Demo / Example

In this short tutorial, I’ll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i react-day-picker

Step 2

import React from "react";

import DayPickerInput from "react-day-picker/DayPickerInput";

import "react-day-picker/lib/style.css";

const ReactDayPicker = () => {

  const onDayChangeInput = (day) => {
    console.log(day);
    alert(day)
  };

  return (
    <div>
      <h3>DayPickerInput</h3>
      <DayPickerInput
        placeholder="DD/MM/YYYY"
        format="DD/MM/YYYY"
        onDayChange={onDayChangeInput}
      />
    </div>
  );
};

export default ReactDayPicker;

From the above code, we import React, the DayPickerInput and the CSS assets.

In our functional component, we created a variable called onDayChangeInput. Inside this variable is an anonymous function that logs the date valued to the console as well as showing an alert box.

Then finally, in our return, we include the props in our <DayPickerInput /> component.

Result

2). @material-ui/pickers

This date-picker is an accessible, customizable, delightful date & time pickers for React. It is one of the most high-quality date-picker out there.

It is based on Material-UI, the world’s most popular React component library.

Brief Overview:

Version

3.2.10

License

MIT

Estimated-Weekly -Downloads

608,421

Unpacked-size

1.49 MB

Link To Repository

material-ui pickers

Code Demo / Example

In this short tutorial, I’ll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i @material-ui/pickers

Step 2

import React, { useState } from "react";
import DateFnsUtils from "@date-io/date-fns"; // choose your lib
import {
  DatePicker,
  TimePicker,
  DateTimePicker,
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";

const MaterialUiPickers = () => {
  const [selectedDate, handleDateChange] = useState(new Date());

  const dateChangeValue = (date) => {
    handleDateChange(date);
    const dateValue = date;
    console.log(dateValue);
    alert(dateValue);
  };

  return (
    <div>
      <h2>Material UI Pickers</h2>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <DatePicker
          variant="static"
          value={selectedDate}
          onChange={dateChangeValue}
        />
        {/\* <br /> \*/}
        <TimePicker value={selectedDate} onChange={dateChangeValue} />
        <DateTimePicker value={selectedDate} onChange={dateChangeValue} />
      </MuiPickersUtilsProvider>
    </div>
  );
};

export default MaterialUiPickers;

The code above shows how we import the necessary dependencies to run the project.

Then in our functional component, we created a useState hook that has a variable and a function called selectedDate and handleDateChange respectively.

Next, we created a variable called dateChangeValue that holds an anonymous function. Inside this function we do three things:

We call the handleDateChange function from our useSate, this helps us update the change event on the date-picker, shown on the page.
Next up we log and alert the value of the date that is clicked on the date-picker.

Finally. in our return, we have a <DatePicker />,<TimePicker /> and a <DateTimePicker />. Each of these components takes in props like value and onChange that have the appropriate variables assigned to them.

Result

Possible Errors

There is a possibility you run into this error: Module not found: Can't resolve '@date-io/date-fns'

When that happens, you can run the following commands to solve the issue:

$ npm i --save date-fns@next @date-io/date-fns@1.x

1). React Date Picker

This is a simple and reusable Datepicker component made for React. It is one of the most popular packages around the web, with hundreds of thousands of weekly downloads.

This date picker relies on date-fns internationalization to localize its display components. By default, the date picker will use the locale globally set, which is English.

Brief Overview:

Version

3.6.0

License

MIT

Estimated-Weekly -Downloads

835,537

Unpacked-size

509 kB

Link To Repository

react-datepicker

Code Demo / Example

In this short tutorial, I’ll be showing us how we can install, display and get the values of the date that is selected in the DatePicker.

Step 1

We will need to install React, this can be done trough Create-React-App. I wrote an article on how to install it here.

Once that is done, we will need to navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

npm i react-datepicker

Step 2

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

import "react-datepicker/dist/react-datepicker.css";

const ReactDatePicker = () => {
  const [startDate, setStartDate] = useState(new Date());

  const getDateValue = (date) => {
    setStartDate(date);
    console.log(date)
    alert(date)
  }
  return (
    <div>
      <h2>React Date Picker</h2>
      <DatePicker
        selected={startDate}
        onChange={getDateValue}
      />
    </div>
  );
};

export default ReactDatePicker;

Above we import all the necessary dependencies. Then in the functional component, we create a useState hook. This hook takes in a variable and a function called startDate and setStartDate respectively.

Next, we create a variable with an anonymous function called getDateValue.

In this variable, the setStartDate function from the useState is updated with the value of the current date as they change on the page. We also log and alert the date values on the console.

Finally in our return, we declare our <DatePicker /> component and assign the necessary props to it.

Result

Conclusion

So that is it for the top Date pickers in React. Date pickers are very popular and important components in the Frontend Development world. It is really great that we have so many Date Pickers out there, and we can easily implement anyone that seems like the right fit for our project.

If you have any difficulties in implementing any of the Date Picker discussed above, feel free to drop your issue in the comment section.

Also if you are looking for an open-source project to contribute to, a lot of the above Date Pickers provide an excellent opportunity for you to do so.

Also, here is the GitHub link to the code examples used in the article.

Subscribe to my Youtube Channel for more tutorials on web development content.