d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

Top 10 Date Pickers in React

Never bend your head. Always hold it high. Look the world straight in the eye.

– Helen Keller

Table of Contents

  • Introduction
  • @ y0c/react-datepicker
  • materialui-daterange-picker
  • React-DateTime-Picker
  • react-date-range
  • react-date-picker
  • react-big-calendar
  • react-datetime
  • react-day-picker
  • @material-ui/pickers
  • 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.

*Important Note: You will need to install React for all methods in this tutorial. This can be done through the Create-React-App. I wrote an article on how to install it here.

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 relies on 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.

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 navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

Step 2

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 <DatePicker onChange={onChangeValue} /> and the <RangeDatePicker onChange={onChangeRangeValue(“date”)} /> 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,123
Unpacked Size: 1.12mb

Link to Repository.

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 navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

Step 2

Here we import React and the DateRangePicker as expected. Then we create a functional component. In this component, we declare 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, we assign 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 alerts 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

Gif showing results of the code sample

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: 193kb

Link to Repository.

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 navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

Step 2

From the above, we import React, useState and DateTimePicker, then we create a functional component. Then we declare 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, we create a variable called getDateValue. This variable takes in an anonymous function that enables us to log and alerts 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 <DateTimePicker /> component.

Result

Gif showing results of the code sample

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.92mb

Link to Repository.

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 navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

Step 2

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

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

Finally, in our return, our first component called <Calendar /> declares some props and assigns 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

Gif showing results of the code sample

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: 209kb

Link to Repository.

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 navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

Step 2

From the above, we import React, useState and DatePicker, then we create a functional component. Next, we declare 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, we create 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

Gif showing results of the code sample

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.13mb

Link to Repository.

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 navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

Step 2

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

Next, 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

Gif showing results of the code sample

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:296kb

Link to Repository.

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 navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

Step 2

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

Inside our functional component, we create 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

Gif showing results of the code sample

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: 686kb

Link to Repository.

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 navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

Step 2

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

In our functional component, we create 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

Gif showing results of the code sample

2) @material-ui/pickers

This date-picker is an accessible, customizable, delightful date & time picker 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.49mb

Link to Repository.

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 navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

Step 2

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

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

Next, we create 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

Gif showing results of the code sample

 

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:

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: 509kb

Link to Repository.

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 navigate into the path of our folder in our terminal and run the npm command to install our Date-Picker package:

Step 2

As shown 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

Gif showing results of the code sample

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 Pickers 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 free tutorials on web development content.

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this