I am using a modified version of the jQueryUI datepicker (http://jqueryui.com/datepicker/#buttonbar). My actual implementation can be viewed at http://jsfiddle.net/mmw834ms/12/embedded/result/.

Per the jQueryUI documentation, the user uses the calender as follows:

Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.

Is this acceptable from a user interface prospective? My concern is the user opens the dialog, decides they don't want to make any changes thus don't click "Done" and don't know to click elsewhere on the page.

  • Please provide reason for downvote so I could learn to better structure my questions. Commented Jan 4, 2015 at 2:47
  • Golden rule - Users are intelligent beings. And something simple like this, with the experience with dealing everyday websites, trust me - its easy enough. Don't worry :)
    – Amit Jain
    Commented Jan 12, 2016 at 5:35
  • related, apple UI suggest against having a cross: ux.stackexchange.com/a/89445/3987
    – icc97
    Commented Feb 11, 2016 at 9:25

4 Answers 4


I am extending the same plugin, and have opted for a 'close' button next to the 'apply' button.

The reason behind this was to comfort those users who may not be immediately aware of the 'click outside to close' paradigm. Some of you may scoff, but the limited user testing we have conducted has indicated that users used the 'x' icon on our previous interface, rather than click outside.

Further to this, 'x' has connotations of 'reset', whereas we were happier going with the much clearer 'close', as it correctly implies that you can play with it for a bit, go somewhere else and come back later to pick up where you left off.

Hope that helps.

working prototype of our daterange picker


"Done" means almost the same as "OK & close", so it shouldn't cause problems if user doesn't change anything. This is more than enough to make sure that user knows how to exit this modal view.

Even if user doesn't know how to exit, user has only these options:

  1. Click on a data --> closes the calendar
  2. Click somewhere else --> closes the calendar
  3. Click "Done" --> closes the calendar

Either way, user is able to close the calendar.

You can compare other calendars from big players like Google. Most of the time they even don't have "Done" button. Here's Gmail calendar which allows to choose "none".

enter image description here


I agree with @maceigesawacki, adding to that

All the date picker controls are Popover dialog and it doesn't need specific close(x) icon cos

  1. User can click outside the popover dialog to close the dialog
  2. User can click on the 'submit' button to submit the form data and close the dialog
  3. It's hard to accommodate the place for the close icon cos there are action icon like 'prev', 'next' and. .
  4. User won't use that close icon cos they are able to close the dialog with better interaction
  • 1
    Well, the user can do these things. The issue is whether some users don't know that they can do those things. It's best to provide a visible affordance for closability rather than relying on hidden ones. Commented Mar 7, 2017 at 19:28

In contrast to the answer above, I disagree. We cannot assume our users use the web or app functionality on the same level.

Implied actions are great for those familiar with similar interfaces, personally, and this is borne out in a lot of UI design guides, I like to provide an intrinsic control to perform an action.

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.