Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Whats the best behavior for a datepicker?

  • Close the control when clicking on a date
  • Close the control when clicking anywhere but the datepicker, but keep it open when selecting a date

Windows applications (e.g. Outlook) follows the first option while the default HTML5 datepicker in chrome browsers uses the second one.

share|improve this question

4 Answers 4

up vote 2 down vote accepted

My suggestion...

Assuming datepicker is bound to an editable text box.

Open it when:

  • it gets focus due to mouse click
  • it gets focus due to keyboard tab
  • it already has focus and user presses down arrow key

Close it when:

  • date is selected by clicking
  • date is selected by pressing enter key (highlight today's date by default)
  • it has focus and user presses escape (this is debatable)
  • it loses focus because of user tabbing out

If you can allow keyboard navigation support within datepicker dropdown's elements, great. Otherwise, just let the user type a date in the text box and most datepickers will navigate and highlight the typed date if entered in the right format.

PS: I agree with jgthms's theory too. But I feel the better way to handle that problem is to ensure the datepicker elements are comfortably sized.

E.g.

enter image description here

share|improve this answer

A date picker is a sort of dropdown menu so once you have selected the right option, it should close.

The only case where it can be different is if your form is automaticaly submited once a date is picked-up. In that specific case, to avoid any click mistake, you may leave it open and let the user confirm his choice by closing the date picker himself

share|improve this answer

Definitely the 2nd option: keep it open while selecting a date.

Datepickers are usually small modules, so it's very easy to select a wrong date. It can be quite frustrating to have to re-open the datepicker and look for the correct date again.

For example, Google Analytics keeps the datepicker open while you select a date range.

enter image description here

In this case, it totally makes sense to keep the datepicker open, considering you have to pick up two dates. But still: looking at the small size of each date, it's easy to make mistakes.

share|improve this answer
    
Instead of keeping the selector open in order to correct the possible mistakes, I would prefer to avoid the mistakes by using bigger size. –  Renaud Feb 24 at 16:00
    
I second this solution. Keeping the box open has the additional benefit of giving the users a clear representation of the date range they've selected. Being able to quickly see what days have been selected would, I think, reduce cognitive load. –  Brian Feb 24 at 21:19

As a "picker" normally should actually have a "select-one-value-behavior" my vote goes for a mix of both options.

Close the control when clicking on a date or clicking anywhere outside of it

This is comparable to the behavior of natively provided html select lists and other components providing single-selection behavior.

Reason:

  • Keep click-ways short: Picking a date is usually exactly about picking one date.

The only reasons I could think of for keeping the control open are situations where date picker components provide some kind of helper for multiple field targets - or - where the date selection has influence on other information which is somehow in-line rendered and displayed as helping bits to the user. Anyway, I would at least add a "choose" or "select" button to the date picker for providing a clear way to actually choose and insert a date.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.