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.

  • 3
    Could you elaborate a bit more on the solution you are using? How exactly does it work, and what is the problem with it? Maybe link to some images, if you can.
    – kontur
    Dec 14, 2012 at 9:51
  • Some questions: Are you selecting a RANGE, or just multiple random dates? What is the primary use case for this feature, e.g. most will select only one date or mostly multiple dates? About how many is "multiple"? Will this be used on mobile devices?
    – Tim
    Dec 14, 2012 at 19:18

3 Answers 3


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

enter image description here

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

enter image description here

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:

enter image description here

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.

enter image description here

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

  • Thanks a lot..looks like this solves the issue more than just labelling..Also saves the clicks... Dec 15, 2012 at 19:43

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"
  • Labelling differently does give a user some idea...Also i do agree that hiding them and showing them may be a experiance issue..but when i did click analysis on datepicker i observed that having OK button is more clicks than just hiding them..Also not every time user selects unexpected dates... Dec 14, 2012 at 11:01
  • @CodeJack If I understand you right, you don't want to place an OK button because of number of clicks user will need to close the popup? Dec 14, 2012 at 11:10
  • yes..exactly... Dec 14, 2012 at 11:54
  • @CodeJack ok, then I suggest to use a dynamic labeling. I've updated my answer with how it may look like. Dec 14, 2012 at 12:07
  • hmm..yes..i think this is the only way..thanks for the time..give me some more time..will accept if i dont get better answer... :) Dec 14, 2012 at 17:50

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.

  • Thanks for the time :) but still this is what almost i tried and mentioned in question..i want the user to understand as soon as he/she sees the calender even before using it.. Dec 14, 2012 at 17:47
  • This is a static mockup. Implement it in a way that by hovering the calendar the corresponding dates are highlighted. I think together with the headline in the datepicker this should give users immediately the idea how to use it. An example for this implementation is hipmunk.com, even though they're using two calendars. Dec 15, 2012 at 13:08

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.