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).

Comments

[Shawn Sheehan]

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

[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.

[Shawn Sheehan]

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

[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!

[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.

[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.

[Fabs Cleanz]

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)"?

[Todd Coulson]

I have this exact same problem right now.

[Alex Sharp 🛠sharesecret.co]

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

[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.

[Colfax Selby]

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