1

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.

Improve this question

4 Answers 4

Reset to default
3

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

Improve this answer
2

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

Improve this answer
1

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.

Improve this answer
2
  • 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, 2014 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, 2014 at 21:19
1

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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