DEV Community

A Good React Date and Time Picker

Frederik ๐Ÿ‘จโ€๐Ÿ’ปโžก๏ธ๐ŸŒ Creemers on January 26, 2019

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 all...
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?