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)
For React, react-datetime is the most popular by a long shot. You could also try Airbnb's date picker
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.
Yeah sometimes it is easier to just build your own, that's what I did with a carousel a few months back.
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!
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.
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.
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)"?
I have this exact same problem right now.
Did you find anything good? I have the same issue and would love to not write one from scratch.
Not really. I ended up writing around
react-datepickerthat uses<input type="datetime-local">or<input type="date">when the browser supports it.I'm having this exact problem right now too, any new advice?