I have an application where a user will need to pick a date and time within a very small range, with precision down to the minute. Generally what happens is that a biometric device is given to a subject and begins recording (usually 24 hours, but up to 96) and during this time, the subject will take a written diary of their experiences (e.g. "8:27 AM - walking; lightheaded"). Later the device and written diary will be returned to a technician who must transcribe the diary entries into my application. There will likely be several diary entries:
Diary Grid

The problem is that none of date/time pickers I've looked at seem to be well suited for this task.

This was my first iteration, using a fairly typical UI:
Typical Date Time Picker

Notice how much of this UI is wasted with disabled options, and plus it doesn't do a good job of indicating exactly where the boundaries lie (in this case 11PM on Tuesday to 11PM on Wednsday).

Here's some other thoughts I had:

Multiple Dropdowns:
Many Dropdowns

This is a pretty good solution, but I'm not a huge fan of how cluttered it makes the UI feel. Now instead of 1 dropdown containing date/time picker I have 4. It also makes it a bit harder to implement proper validation, and still doesn't do a particularly good job of indicating exactly where the boundaries are.

Date/Time Slider:
Date/Time Slider

This one does provide very clear indication of the boundaries, and it's very easy to limit the range of inputs, but it doesn't do much to unclutter the UI (especially if I include the markers I've added in the mockup). This is a pretty non-standard control and could confuse some users, but I'd also want to give a text input next to it for users that prefer to use their keyboard. I'd probably also want hide the full slider in a dropdown. The hardest part here would probably in implementing the entirely new control.

Any other suggestions? What's a user-friendly way of presenting a date/time picker for very small ranges? I'm sure I'm not the first one to encounter this problem.

  • Which is more important: A) the range of time taking place -or- B) The time they select?
    – Chromarush
    Aug 6, 2015 at 18:44
  • @Chromarush The user cannot modify the range, only select a time within that range. And the user may need to select a dozen or so discrete times within that range.
    – p.s.w.g
    Aug 6, 2015 at 18:45
  • Can you give any more description of the context for the tool? Is there any relevance in the user trying to pick a time for a time range within that available range? For scheduling tools for meetings you pick a start time and may choose a time range of 1.5 hours and the system shows them how long it will go. Some tools like airline ticket scheduling may let you pick if an AM or PM arrival is more useful and based on your selection only list availability for that time frame. If it is something like a tool to schedule an exam within an opening of time may have blocks of time available.
    – Chromarush
    Aug 6, 2015 at 18:57
  • @Chromarush I've included a description of the use case as well as a screenshot showing the grid where this control is to be used.
    – p.s.w.g
    Aug 6, 2015 at 19:37

2 Answers 2


Updated answer

A reduced calendar may be easier to understand and use as oppose to the multiple dropdown or the range slider option.



download bmml source – Wireframes created with Balsamiq Mockups

Calendar views are helpful in orientating the user in selecting the correct date much better than a dropdown. Switching over to a weekly (or biweekly, depending on your date range) calendar instead of the monthly view helps preserve context while stripping away most irrelevant dates. Calendar picker is also a much more familiar interface to interact with as compared to sliders. Sliders can be fiddly to understand and adjust.

You can put the example above into a dialog that opens when the user clicks into the time cell to edit it.

  • Thanks, this gives me some ideas. I do like having the week-calendar idea, but yes the user does need precision down to a minute.
    – p.s.w.g
    Aug 6, 2015 at 19:27
  • 1
    See my updated question for more context.
    – p.s.w.g
    Aug 6, 2015 at 19:39
  • I'm updated the answer to handle selection of discrete times.
    – nightning
    Aug 6, 2015 at 20:33

What about a model like Busycal uses? You could set it so that when you drag events across the calendar, it progresses in smaller increments.

Example gif: http://recordit.co/bpdLdbMt6x

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.