How should user unselect a date from a calender?

Question

I am using jQueryUI's datapicker modified with the ability to select the time (http://trentrichardson.com/examples/timepicker/#basic_examples). Instead of having an input for the date, I wish make it look more permanent, and will therefore put the date in a span or something, and include a calender icon beside it which will open the select datetime dialog. Whenever they change the date and click "Done", it is saved in the database. Is it is okay to have no date selected, and if there isn't yet a date, I will include something like "None Selected" in the span instead of the date.

Now, my question. If a date has been previously saved by the user, how do I allow them to change it to no date selected? I could put a little X next to the calender icon, but this seems a little weak.

Answer 1

That space between the "Now" and the "Done" button is screaming out to me for a "clear date" (or other appropriate legend) button.

Answer 2

Sort of a variant on skwokz suggestion, I've dealt with customizing that widget and my solution is to go around it.

My preferred UI here has, above or below the date input:

• the original (if updating a record) value, which if clicked will reset the widget
• an "x" button that if clicked will blank out the widget

Listing the original date allows the user to see what's changed, and the click action ("use this value") is pretty obvious. I think X has become a pretty understood standard for "clear the widget" (at least, Apple uses this all over).

Answer 3

The general practice to "undo" a new selection and revert back to the the previous selection is to add a cancel button although it might be somewhat awkward to fit it in here. I think the "x" would work fine however it just need to be placed visibly.

Alternatively you can have a "Reset" button that when pressed, reselects the saved selection. The user would then click done after that to close the selector. Don't like this as much since "Reset" isn't necessarily very clear especially when the user first tries to select something and there is no saved selection to reset to.

Answer 4

Click it again.

When I select something, then realise it was optional and decide that actually, I'd rather not provide it, the most natural thing to try is to press again on the selected item.

This echoes the familiar check box, as well as a physical push button.

Answer 5

I would prefer this UI: A 'remove' icon in the Input control appears when the user selects a date. He can simple click on the icon to remove any selected date.