Every website contains few reusable codes to satisfy the basic needs like sliders, calendars etc. Using plugins (reusable codes) saves a lot of time and efforts of a developer helping him/her focus on the major parts. None wants to waste couple of days developing something that is already available in the web.
There are many date-picker or calendar plugins available on the web helping you save your time and making implementation faster. Well, you don’t have to search from this long list as VoidCanvas is doing the task for you and listing out the best 10 you can use from.
In this article we are providing the best 10 react datetime picker/calendar plugins you can include in your website.
BlueprintJS DateTime Picker
This BlueprintJS DateTime Picker react library contains a collection of React components having various useful features for interacting with dates-times. Two third-party plugins has been used in this datetime picker plugin to increase the ease of time management.
Features
- Can select single date or date range. (Day-Month-Year wise).
- Can select time (hour, minute, second, millisecond) too.
- Date-Time range combined selection.
- Can enter text inputs, useful for forms.
- Can disable particular dates.
React Dates
An easily inter-nationalizable, mobile device friendly react datepicker library. Single date or date range, this react date picker plugin satisfies both the need. But as the name suggests it only works with the dates, not with the timing. React dates comes with a bunch of customizing options helping improve the look and ease of use. If you are looking only for a react date picker, you can blindly relay on it.
Features
- A bunch of attractive features.
- Only for date picking.
- Can select single date or date range.
- Block particular date,day or date range.
- Highlight dates.
- Info panels.
- Mobile friendly.
- and the list keeps rolling.
React Infinite Calendar
Limitless scrolling only date-picker built with React. It includes features like date selection, date range selection, localization, disabling particular dates, keyboard support, themes and more. It satisfies all the basic needs perfectly so this can sure be a choice for you.
Features
- Customizable, Flexible, Extensible.
- Infinite date scrolling.
- Translation.
- Date or date range selection.
- Date disabling.
- Theme support, keyboard support.
- Mobile friendly.
React Date Picker
Reusable and very simple to implement Datepicker component for React. Though the title doesn’t say ‘time’ but you can include time along with dates. This React Date Picker plugin comes with a lot features and date picking option, definitely one of the best in the market.
Before you start using it just make sure you separately install PropTypes and Moment.js as these two dependencies hasn’t been included in the package.
Features
- Very easy to implement and highly customizable.
- Various designs.
- Can elect single date-time.
- Can select ranges.
- Can disable calendar.
- Can exclude or include particular date-time or date-time range.
- Can highlight dates.
- Placeholders.
- Different time zones.
- Filter dates and many more.
React Day Picker
A flexible and smooth to use date picker library for React. React day picker is highly customizable, localizable, with ARIA support. It has no external dependencies and very weights very less, 9KB gzipped only. Those willing to include date picker (this one doesn’t come with time selection option) can surely give it a try.
Features
- Flexible and smooth.
- Easy to customize.
- Very light weight.
- Has no external dependency.
- Works only as a date picker.
- Can select both single date and date range.
- Can exclude or include dates.
- Has input fields and many more.
React Datetime
A complete and light wight as well react date-time picker component. This react plugin has major dependency on React.js and Moment.js. It can be used both as a date-picker and time-picker separately or at the same time. React Datetime is highly customizable and simpel to use.
Features
- Simple to use.
- Highly customizable.
- Diffferent language suppot.
- Can select both date and time.
- Single unit or date range can be selected.
React Bootstrap Date Picker
React date picker based on bootstrap. This is another react date picker plugin that has been developed to picks only dates, not the time. Here you will find all the basic features you may looking for.
Features
- Based on bootstrap.
- Can pick both single date or date range.
- Can disable.
- Different styles.
- Placeholders, labels and many more.
React Native Datepicker
React native datePicker provides react component for iOS and android, with the help of Time-Picker-Android, Date-Picker-Android and Date-Picker-iOS. It is very smooth to use and easily customizable.
Features
- Smooth to use.
- Easy customization.
- Different appearance option.
- Single date time, date-time range, date-time restriction.
React Datetime Picker
A component that takes user input for selecting date-time for a React application. This one is a very simple, good looking and easy to use react datetime picker plugin. React Datetime Picker basically shows an input section complete with custom/native inputs, a clock and a calendar.
Features
- Easy to use.
- 2 calendar types.
- Detailed (hours, minutes, seconds) time picking.
- Detailed date picking.
- Range selection, click events and many more.
rc Time Picker
rc time picker is a react time-picker plugin that purely deals with various kinds of time picking. If you are only looking for time picker, this one is definitely best in the business.
Features
- Only deals with time.
- Easy to customize.
- Can select time according to hour, minutes, seconds.
- Can disable time.
