Is a close call to action icon desired for a calender dialog?

Question

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.

Answer 1

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.

Answer 2

"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".

Answer 3

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

Answer 4

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.