DatePicker UX for single and multiple calendar mode

Question

I have a situation where I have to use same datepicker/calendar to do single date selection and multiple date selection in two different modes in the same page.

I thought of a solution where the datepicker hides as user does one click in single selection mode and two clicks with multiple selection mode.

I need to make the user understand that just by viewing rather than by using it.

Answer 1

I like the Google Analytics solution for this. When you first open the datepicker, it displays the following:

You'll notice that this introduces the user to the idea that they need to select a date range with two visual cues:

1. by providing an initial range highlighted on the calendar.
2. by showing two boxes on the right for the date.

If you want the user only to be able to select one date, you could use two similar visual cues:

1. initially select only one day on the calendar
2. display only one box at the right

Continuing with the Google Analytics date-range example, once the user selects a start date, the highlighted box on the right side changes its focus. See how the blue rectangle is now around the second date:

The Analytics apply button is now clickable to signify to the user that the selection has changed from the default. I don't think that having an Apply button at all is necessary. If you're concerned about clicks, the dual visual cues of the calendar selection and the number of text boxes should be sufficient to let your user know whether they're picking a date or date-range. Go ahead and close the calendar automatically. Just be sure that you display something like the following afterwards so that the user will have the feedback of knowing the date(s) they've selected.

(Clicking the above re-opens the date-picker.)

Answer 2

One idea that comes to my mind is to do not close the datepicker by clicks, but instead highlight a selected date somehow (for example make it green) and enable OK button for one date mode and highlight a single date with another color (say, gray) and two dates in green in a multiple dates mode (and enable OK then). I also suggest to change the title of the datepicker popup to 'Select a date' or 'Select start and end dates' respectively. I think that it's a bad idea to close the popup exactly after one or two clicks because user may select something by accident and he or she will need to repeat the procedure once again, etc. So, I think that you should let them finish and then close the popup manually (add an "OK" button which will close the popup).

And if you don't want to place an OK button anyway, you may try to use a dynamic labeling:

1. Place a label underneath the calendar saying something like "Please, chose a start date" and then
2. Replace it with "Click once again to choose an end date"

Answer 3

Maybe a solution with just one datepicker allowing for single and multi date selections could look like this.

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

• Single select

  Click on 17th would select and highlight the 17th. A 2nd click e.g. on the 20th would deselect the 17th and select the 20th instead.

• Multi select

  Click on the 17th would select the 17th and a 2nd click e.g. on the 28th would select the 28th in addition.