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:

The standard HTML date/time picker

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:

Yipgo's date/time picker

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
  • tomorrow
  • thursday at 1pm
  • etc.

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.