Date-time pickers are all over the web and have been gradually evolving as developers and UX people work their magic. However, they can still be a frustrating experience, especially given that pickers are difficult to implement once for mobile and desktop.
A case in point is the standard HTML picker in Chrome on desktop:
On the desktop this isn’t a great experience:
- You get no interface beyond the tiny inputs for entering the hours and minutes portion of the time.
- The up/down arrow buttons are tiny and clicking them from a trackpad is a pain.
- When the picker is open, it’s not obvious what the button with the dot does and there are no tooltips.
Within Yipgo - as dates will feature heavily - I wanted to make the situation a bit more efficient so decided to combine a really simple natural language date library ✝ to make it possible to describe your date and time in a more human language.
Have a look at this demo:
As someone types, in real-time, the picker will update. It allows the clicking of elements within the picker as you might expect too. Users can use expressions like:
In two days
thursday at 1pm
It takes away some of the calculation you have to do when trying to think about what to click.
So far it’s been working really well - it’s a much faster way to enter a date when there’s a keyboard in front of you and if you’re on mobile, you can still pick through touches.
Thoughts and feedback would be much appreciated.
✝ - Most of the credit for this should go to the amazing Instaparse library that will transform ABNF notation into Clojure datastructures.