Proper web UI elements to select interval between snapshots?

Question

Let us assume that I have a system where temperature, humidity, rain, etc. measurements are recorded at certain dates & times for certain locations (let us call them "snapshots").

This is just an example, and such "snapshots" can be any measurements taken on an irregular basis, for example dates when inventory was taken in warehouses, or patient interactions with doctors (some rare, some frequent - and we want to compare some parameters between two interactions), and so forth.

Some locations get snapshots taken on an almost daily basis, but some only once every few months. Some locations used to get them once every few months, but now get them more often. Some may have 3 snapshots, and some may have 50 (but never more as they get pruned).

For a given location, I want to allow the user to select exactly two different snapshots, then I will redirect him to a page where I compare them side by side, calculate some other values based on them, and so forth.

Option A: I'm considering would be two calendar controls, and enabling for selection only the dates on which snapshots were taken (also marking them another colour).

However, the snapshots can be distributed over time. For example, there is a chance that some locations would only have snapshots taken every 6 months. This would force the user to scroll month to month in order to make their selections.

Also, in rare cases there can be two snapshots made in one day (say, one in the morning and another in the evening), so the user won't be able to select which one exactly he wants.

Option B: I'm considering is just have two drop-downs or multi-line selects listing the available snapshots; user clicks one, then the other and he's done. This works well for locations with not many snapshots, but will have poor usability for those with many.

Am I missing some simple elegant solution to this?

P.S. I want something fairly simple to implement from ready-made HTML elements / jQuery widgets like datepicker, I don't want to custom-code anything fancy.

Answer 1

Why do you want to resort to a calendar picker when you have limited dates available?

If the number of options is less, then a radio button list should suffice. Else, you can use a drop-down combobox.

If you want to be fancy, implement a timeline with markers for the dates and the user knows exactly where the points are and can select them from there.

^{download bmml source – Wireframes created with Balsamiq Mockups}

^{download bmml source}

Answer 2

Here's a nice selection of date/time pickers to look at:

http://trentrichardson.com/examples/timepicker/

It seems what you want could be facilitated with a date/time picker and a number input for intervals (days I assume). The time of the date/time picker could default to a useful value so the time would usually not need to be set, but it's always there for the rare cases when it's needed.

Due to the fact that the frequency can change dramatically, I wouldn't try to support an easy low frequency method and a more complex higher frequency method and swap in the optimal method appropriately. This has a potential for confusion.

I would first implement the simplest method that covers all cases. If you get complaints about this one-size-fits-all approach then you could revisit the problem.