Skip to content Skip to navigation

Improving Date and Time with our new Time Picker

Sometimes it is about the small things. Something missing in Drupal's date popup field was a time popup. The calendar popup is very useful and very user friendly but it's sister field, the time field, is not. 

Just give me the goods: Drupal Module Project Page

Time Picker

Drupal time - out of the box

The out of the box configuration of a date field allows you to specify time granularity all the way down to seconds. If you choose a time granularity of anything smaller than day you will be presented with two input fields. One input field for the month, day, and year and another for the hour, minute, and seconds.

Awkward input UI

So great, the user has two fields, but when the user clicks into the time field to set the time value they are forced into some hidden functionality. The date popup field breaks up the hour, minute, and seconds portions of the input by using javascript and forcing a highlight on a single portion of that input field only.

For example, when the user clicks into the time field only the hour portion is highilghted. The user can then start to type the hour or use the arrow keys to increase or decrease the time. "That doesn't sound so bad," you may be thinking, but this breaks in a couple of places.

What if the user wanted to change only the minutes? They would have to be very careful about clicking into the right portion of the field to select only the minute numbers or else they will be defaulted to hours. What if the user had a date in their clipboard that they wanted to paste in? This is trouble as well. It is difficult to select the whole contents of the field and paste in a new value. So what did we do to fix this?

A new timepicker to improve UI

We created a small module to fill in the gap that the date popup field left us. And what better way to compliment a date popup field, but with a time popup. We selected a timepicker plugin that had a good range of options and settled on using the drop down select fields display. We then overrode the default time input for the date popup fields so that this plugin would display.

This plugin requires very little setup and minimal configuration. For installation please see the Drupal module page or our GitHub Page.  Once you have downloaded and enabled the module by default all date fields with the date popup widget should recieve the new drop down time select. The drop down select items will automatically match your fields' configuration on date format. Download, install, and forget. 

Happy Picking!


Plugin Page:

Drupal Module Page: