Date Time Picker, together in one control or separate?

Question

I have been looking around for different controls for date time pickers, both together as one control and separate as two different controls in order to solve a problem we have in our business.

To give you more background about why, I am designing an application that deals with tracking and tracing of products across the US. With the way our business runs we have user's calling carriers every couple of hours to find out where they are and when they will get to the destination. When the user logs this they have to enter the location and the ETA (date and time), we do auto calculate the ETA, but for business reason the user has to be able to edit the ETA. Currently we are using two different controls for date and time and I find that the usability of it is a little poor.

Has anyone had any experience researching the usability of date time pickers being together as one control or separate as two?

Answer 1

I don't have any research to back it up, but my intuition is that with a drop-down list of dates and times as text strings you risk increased errors from people selecting the wrong date because they are looking at the time values. Date pickers should follow familiar calendar formats if you don't have a reason to do otherwise.

However, I do think they should be combined, at least in the situation you've described or in any other where the time is really dependent on the date (e.g. appointments where time availability will vary by date). The only situations it would make sense to keep them separate is if the two are really independent.

I don't know which examples of combined selectors you were considering, but my suggestion would be to try to find something where the initial selection is a date, but as soon as you pick a date the time options pop up.

A quick mock-up idea (needs more options, keyboard handling): http://fiddle.jshell.net/jBk8h/

Answer 2

If you have a fairly narrow target window for date/time, you could consider a dropdown list populated with 15-minute (or hourly, or whatever works for you) intervals that has the original time as the pre-selected choice.

Also, look at the iPhone's calendar event picker. Using an iDevice, add a new event, then tap the Starts/Ends button. The display has four wheels: date, hours, minutes, am/pm. (If you pick all-day, the display changes to three wheels: month, day, year.) This is a very useful way to rapidly spin through a calendar. The user quickly understands how to effectively use the "big jumps/little jumps" to zoom to a specific date and time. Technically, each wheel is a separate control, but the concept is presented to the user in a natively understandable fashion, so it feels like a single component.