DEV Community

A Good React Date and Time Picker

There are so many date pickers out there, but I can't find one that

  • works well on desktop and mobile
  • has nice keyboard input, preferably just allowing me to just type the digits one by one, skipping over any formatting characters.

I really love th date picker control that Chrome provides for input type="datetime-local", but that has very poor browser support. Any suggestions?

What I've looked at

  • The AirBnB datepicker react-datetime, and the DateTimePicker in react-widgets all don't handle direct input into the text input well. They don't easily let you switch between setting month/day/year. In many of them, the input behaves like a normal text field.
  • react-datetime-picker is very close to what I want. I can easily switch between date, month, year, etc. using tab or the arrow keys. I can also (inc|dec)rement the values using the up/down arrows. My only nitpicks, and I've posted these as an issue, are that focus doesn't automatically move from field to field when a value is typed, and that typing numbers starting with a 0 isn't intuitive (typing 05 into a field causes 005 to be entered).

Top comments (11)

Collapse
 
rationalmachines profile image
Shawn Sheehan

For React, react-datetime is the most popular by a long shot. You could also try Airbnb's date picker

Collapse
 
_bigblind profile image
Frederik πŸ‘¨β€πŸ’»βž‘οΈπŸŒ Creemers

Hey Shawn, thanks for the suggestions. I've tried both of them and they don't really work the way I want. I might just have to fork one/write my own, but I'd like to make sure there isn't some beautiful unicorn out there that I just haven't discovered.

Collapse
 
rationalmachines profile image
Shawn Sheehan

Yeah sometimes it is easier to just build your own, that's what I did with a carousel a few months back.

Collapse
 
httpjunkie profile image
Eric Bishard

Hi Frederik!

First off I want to say that the "REACT-DATETIME-PICKER" is pretty cool, I feel the styling is lacking a bit, but I bet that's something you can fix.

I was wondering if you had checked out the KendoReact date picker? I have a demo on StackBlitz if you would like to check it out.

You can toggle these two lines of code to see our default vs Material styles.

We also have a Bootstrap style not included in this demo.

We have many variations of date inputs, pickers, range and other ways to customize, I have provided a few links below.

You can check out the basic overview for our date pickers, a Date Input, Calendar Version, a regular Date Picker like in my demo, Date Range Picker, Multiview Calendar and finally, just a Time Picker.

I hope if you have not found, maybe this helps? Let me know if you have any questions, I'm always available here and on Twitter @httpJunkie. I'm the developer advocate for KendoReact and I can help answer any questions if you have them!

Collapse
 
_bigblind profile image
Frederik πŸ‘¨β€πŸ’»βž‘οΈπŸŒ Creemers

Hi Eric

That looks cool, but I'm building this app as a volunteer for a nonprofit,and they're just starting out, so I don't think they want to spend money on a UI library.

I'll keep it in mind for commercial projects tho.

Collapse
 
httpjunkie profile image
Eric Bishard

Cool, thanks for responding! Definitely keep it in mind, we have support and a suite of other components that come along with it. Good for any JavaScript project or framework! Let me know if you ever have any questions.

Collapse
 
pulfabio profile image
Fabs Cleanz • Edited

Hi everyone!
Has anyone found a solution to the react-datetime-picker issue described above: "and that typing numbers starting with a 0 isn't intuitive (typing 05 into a field causes 005 to be entered)"?

Collapse
 
toddcoulson profile image
Todd Coulson

I have this exact same problem right now.

Collapse
 
ajsharp profile image
Alex Sharp πŸ› sharesecret.co

Did you find anything good? I have the same issue and would love to not write one from scratch.

Collapse
 
_bigblind profile image
Frederik πŸ‘¨β€πŸ’»βž‘οΈπŸŒ Creemers

Not really. I ended up writing around react-datepicker that uses <input type="datetime-local"> or <input type="date"> when the browser supports it.

Collapse
 
colfaxselby profile image
Colfax Selby

I'm having this exact problem right now too, any new advice?