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
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:
- by providing an initial range highlighted on the calendar.
- 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:
- initially select only one day on the calendar
- 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.)
No comments:
Post a Comment