13 Greatly Designed React Date Pickers

react dates

Having a well-arranged date picker is important so that the visitor does not waste a second in choosing the date of birth or when he wants to receive the order of the product he has just bought in our eCommerce. For this reason we bring you 13 date and time selectors in React that are characterized by their design and their great user experience.

These selectors are from React.js, the open source Javascript library that allows us to recreate some of their great experiences when having to choose the date and the specific day for an event on the website that we are visiting. Let's do it without forgetting to remind you that you have another tab list also in Javascript React.js.

React multiple selector

React multiple selector

This datepicker in React, apart from have a good design, It is characterized by allowing the selection of several dates in the calendar that it gives us. You can find the demo to know in situ how this React selector behaves. Here you have its place in Github.

React native range


Un date picker in React.js which is characterized by its ease of use and how customizable it is. Simple in its conception, this being its maximum success to become the date and time selector of your website.

Native React Dates

Native React

This React date picker follows the same pattern as the previous ones to convert in another of those indicated on this list. As well as calendar, you can select a range of days to use as a filter. Another interesting React date picker that you have at your disposal.

RC date picker

react datetime

You have the demo of this RC date picker that continues to show great quality like the rest. One of its details is that offers the possibility to choose the time, so it differs from the others in this regard. Great user experience is a great interface as a date and time selector in React.js. You have here your Github.

React Calendar

React Calendar

Here we completely dispense with the time, to stay with a date picker in React.js. It is similar to the previous with the theme clear, but it is distinguished by appearing as a bar that can be opened to select the date we want. Here you have your Github to go to the source code instead of the demo.

Mobile React date picker

react mobile

This date picker dedicated to mobile from React.js differs from the rest for weighing very little. It stands out for its design by choosing the different elements of the date through a digital wheel. You have your Github so that you can get closer to its source code and thus implement it on your website.

Infinite React Calendar

Infinite calendar

This infinite date picker built with React is characterized by themes, keyboard support, range selection and location. One of the most comprehensive date pickers on the entire list. Here you have your Github for all the remaining information after you have enjoyed the demo. In the panel you will have the whole series of options to try each one and thus get a better idea of ​​its possibilities.

React Dates

react dates

A date picker in React that is distinguished by be optimized for mobile and that is presented with very good manners. Also has your Github so that you can know every detail of it and thus take it to your website. You have a great variety of options so that from the demo you can configure it your way and thus you can get more out of it.

React native selector


We recommend that you pass by his Github in order to know the design of this date picker in React. We can distinguish it because use the APIs DataPickerAndroid, TimePickerAndroid and DatePicker iOS. So its interface will sound familiar to you if you are used to dealing with any of those OSs for mobile devices. Perfect to implement it in an app for any of the two mentioned operating systems such as Android and iOS.

Simple React selector

Simple React

A very simple date picker in React.js that you can find several usage examples from its demo website. We also have your Github to know the rest of the details of this simple selector in React. Another interesting not only for its simplicity, but for its different customization options to give our website a very elegant and simple one.

input time

input time

Another date picker to which the option to also select the time is added, so it comes complete. Works with momentjs and the design comes from the same Dribbble website. You will surely love it for its design and that elegance that it gives to the website where it is installed. This is your Github so that you do not miss anything with another great example of what a date and time selector is.

React day picker

React selector

This date picker in React is characterized by its 9KB in gzipper, apart from being well customizable, locatable, that supports ARIA and does not depend on anything external. Localizable we mean that we can select the language of the calendar so that it is translated into our language. Another of the most complete selectors in this list of React and that makes it quite difficult for us to decide on one.

Datepicker ReactJS

date picker

You have the demo like the rest to know in situ this date selector that is characterized by a tool bar that when pressed opens the calendar. It has a hover selector and is a selector of high quality in design. It is minimalist, so it can be integrated on any type of website. You have his Github to find out the rest of the details and use the code as you please for your website.

We leave you with another list, although this time of forms in CSS for the implement from now and you have a good repertoire to choose that form of elegance for your website.

Leave a Comment

Your email address will not be published. Required fields are marked with *



  1. Responsible for the data: Miguel Ángel Gatón
  2. Purpose of the data: Control SPAM, comment management.
  3. Legitimation: Your consent
  4. Communication of the data: The data will not be communicated to third parties except by legal obligation.
  5. Data storage: Database hosted by Occentus Networks (EU)
  6. Rights: At any time you can limit, recover and delete your information.