Date/Time Picker for Small Ranges

Question

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:

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:

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:

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:

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.

Answer 1

Updated answer

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

e.g.

^{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.

Answer 2

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