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.

enter image description here

  • Could you provide more context? What is the purpose of the form, and why might one want to leave a date field empty? Jan 3, 2015 at 4:32
  • @200_success The date is an anticipated sales order intake date. Sales person puts in their best guess, and it is not a required field. Jan 3, 2015 at 12:07

5 Answers 5


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


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

  • Welcome to the site, @Adam. Can you include a mockup to make it clear what you mean? Jan 4, 2015 at 16:10

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.


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.


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.

enter image description here

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.