Top 10 React DatePicker/Calendar Plugins With Demo

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.

BlueprintJS DateTime Picker

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.

Demo Download

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.

react dates

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.

Demo Download

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.

React Infinite Calendar

Features

  • Customizable, Flexible, Extensible.
  • Infinite date scrolling.
  • Translation.
  • Date or date range selection.
  • Date disabling.
  • Theme support, keyboard support.
  • Mobile friendly.

Demo Download

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.

react date picker

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.

Demo Download

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.

react day picker

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.

Demo Download

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.

react dateTime

Features

  • Simple to use.
  • Highly customizable.
  • Diffferent language suppot.
  • Can select both date and time.
  • Single unit or date range can be selected.

Demo Download

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.

react bootstrap date picker

Features

  • Based on bootstrap.
  • Can pick both single date or date range.
  • Can disable.
  • Different styles.
  • Placeholders, labels and many more.

Demo Download

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.

react native datepicker

Features

  • Smooth to use.
  • Easy customization.
  • Different appearance option.
  • Single date time, date-time range, date-time restriction.

Demo Download

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.

react date time picker

Features

  • Easy to use.
  • 2 calendar types.
  • Detailed (hours, minutes, seconds) time picking.
  • Detailed date picking.
  • Range selection, click events and many more.

Demo Download

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.

rc time picker

Features

  • Only deals with time.
  • Easy to customize.
  • Can select time according to hour, minutes, seconds.
  • Can disable time.

Demo Download

About This Author

Exploring the web. In love with javascript & frontend development. Creative & Poorophobic.