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.
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:
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.
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.