When building a website, especially registration forms, we often see the use of Date Pickers for users to register data in the form of dates, months, hours, and minutes,... React supports Date components that are very convenient for users.
In this article, I will guide you through some Date Pickers libraries that I find really useful.
Note that we will only be looking at libraries that have been updated recently. This is to ensure that they will work smoothly on your project without having to spend too much time troubleshooting issues.
1. Material UI Date/Time picker
If you are using Material UI as the main theme in your project, you will most likely have to use Material UI's date and time picker as well.
While you are limited to 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 on this list that has a clock view. This makes it easy to pick the time in both desktop and mobile views.
Features:
1/ Design in sync with Material UI
2/ Have your own date or time picker
3/ Multilingual support
You can download it at Material Date / Time pickers.
Install:
npm install @material-ui/core date-fns @date-io/date-fns@^1.3.13 @material-ui/pickers --save
2. react-day-picker
This is the simplest library on the list. If you are looking for a lightweight library for your project, this would be a good choice. Don’t be fooled by its small size, as it provides most of the common functionality that users need on a daily basis and more.
Its style is very simple, so it is easy to customize. It comes with its own datetime utilities for working with datetime and localization. However, you can use other datetime libraries if you want.
Features:
1/ Date range picker
2/ Supports calendar selection or direct text input
3/ Localization
4/ Easy to customize
5/ Comes with its own datetime library
You can download it at react-day-picker.
Install:
npm install react-day-picker --save
3. airbnb/react-dates
Airbnb’s React Dates is one of the older libraries on this list. However, it is still actively maintained. It is localizable, mobile-friendly, and built with ease of use in mind. It relies on Moment.js to work with datetime, which makes it a bit heavyweight compared to the lighter libraries on this list.
The biggest downside to this library is that they don’t have proper documentation and usage examples. All they have is a Storybook and a few examples on their GitHub repo. So if you are fairly new to React or don’t like to play with code, you can skip this component.
Features:
1/ Date picker, date range picker
2/ Localization
3/ Mobile friendly
4/ Easy to operate
You can download it at: airbnb/react-dates
Install:
npm install react-dates --save
4. React Rainbow components date picker
React Rainbow is a UI components library similar to Material UI.
The main downside to this library is that its components cannot be installed individually, so you have to use the entire UI components library to use its date/time picker components.
Another downside is that it is very opinionated about how components should look and behave. For example, you can't have an inline date picker because everything needs to follow a modal.
Features:
1/ Date picker, date range picker, time picker
2/ Localization
3/ Easy to use
4/ TypeScript support
You can download it at: DateTimePicker
Install:
npm install react-rainbow-components --save
Conclusion
Depending on the purpose and compatibility, use the appropriate Date Picker Component for your website. Hope what I share will help you.