Put the Clear Button Back in Datepicker

As jQuery UI rapidly approaches version 1.6 (currently release candidate 6), a list of some of the changes underway can be found on the jQuery UI Development & Planning Wiki. It will continue to offer a fantastic array of widgets, interactions, and effects as well as themeroller, an awesome tool for creating custom UI themes. However, dig into the wiki and you will find a list of thing being removed, including the clear button in Datepicker:

“clear” button – seems like overkill since a user can simply clear out the field value manually. Plus, clearing the input would make the input invalid if the field is required. It’s best to encourage users to pick a date, not clear the field.

I think both of the last two statements are presumptive. Yes, an empty date field might be invalid, but it can also be perfectly acceptable. For example, a form may have start and end date fields. On the back-end, if there are valid dates in both fields, then all data within this date range would be returned: Show me all foo between two specified dates. However, leaving one or both of these fields blank may signify an open-ended search: Show me all foo up until the end date, or, show me all the foo since the start date, or, show me the foo!!! The back-end should absolutely be validating form data. It’s best to allow users to pick any data valid for a given field. I don’t have a problem with the front-end doing additional validation. I think allow developers a mechanism via Datepicker to choose what values are valid would be a better idea than assuming and empty field might be invalid.

As far as the first statement, not having a clear button makes it impossible to remove a date from a readonly field. Datepicker can easily set a readonly field but not clear it. So why would you want to change a readonly field? Despite the fact that the web has become ubiquitous, many people still are in the habit of double-clicking everything: hyperlinks, inputs, buttons, etc. Couple this with web browsers that keep previously entered values in input boxes and you end up with date fields that display Datepicker on the first click of a double-click and then a list of previously entered values over the top of Datepicker on the second click of the double-click. Setting an input to readonly prevents the history from appearing on a double-click and thus from interfering with Datepicker. Now, this could possibly be a semantic no-no and a violation of accessibility, but it does happen. Having a clear button makes it possible to clear a readonly field.

Datepicker is part of jQuery UI: it is a user interface for dealing with date fields. Whatever a user can validly do with a date field, Datepicker should provide a useful interface for doing so. Put the clear button back!

15 thoughts on “Put the Clear Button Back in Datepicker”

  1. Making presumptions about how people will use something is easy to do, but usually dead wrong.

    You’re right, as usual Lucas.

    I hope you can set them straight.

  2. Hi. I’d encourage you to post comments like this to the planning wiki page since its more likely we’ll see it and respond there.

    As for your use case, it is unclear to me why you would have a datepicker attached to a readonly text field. The HTML spec defines readonly inputs as those the user is not intended to edit. Similar to a disabled input, the difference being that its value is submitted with the form.

    Could you explain the rationale behind having an editable widget attached to a non-editable form field? A demo page would be particularly helpful.

    We removed the clear button for the reasons you quoted above, but also to remove visual complexity that can otherwise easily be done by clicking into an input and deleting the text. There are a multitude of similarly complex user behaviors that could be covered through button shortcuts, but of course the more buttons you add, the less usable the interface becomes. Perhaps in a future release, we could allow custom buttons (similar to dialog) where you could define your own callbacks to suit the needs of your app…?

  3. Thanks Scott, I’ll be sure to post on the wiki next time.

    As for having datepicker attached to a readonly input, that was a decision made by the boss who double-clicks everything (including input fields). In this particular example, the date field is used regularly to run reports from various time frames. Every time he double-clicked a date input it wold display Datepicker with the history of values entered into the field over the top. Setting the field readonly prevented the history from appearing on top of datepicker. I agree that it’s not the most elegant solution and that it’s counter to the HTML spec, but it’s sometimes harder to change user behavior than markup.

    I’ll see if I can get a demo up in the next day or two.

    Since buttons are no longer displayed by default in Datepicker, perhaps cancel can be added back in an option that is disabled by default? Otherwise, allowing custom buttons would be nice!

  4. Hi lucas. I didn’t see you followup over at the wiki http://wiki.jqueryui.com/DatePickerCalendar

    I’m posting here because I rather not create an account to login over there. Kindly add my comments if you add a wiki comment.

    I’m here today because I’m looking for a date picker with a clear button and found your site. Currently I have pages with a separate button/icon to clear the date. It looks fine on those pages, but now I will have to make the icons smaller for pages where the icon should be the size of the date text. It could be a non-issue if the date picker allowed the user to REMOVE a date picked in error while maintaining validated entries for correct dates.

    Allowing the user to click into the field to clear the text is a fine thought, but it also allows them to input dates in a format I do not want; or totally invalid dates unless I add client-side validation.

    I use read-only text fields so that the user can’t enter an invalid date. If you go to http://jqueryui.com/demos/datepicker/ you can enter an invalid “date” like 444/44/444444 and tab out of the field. Read-only saves client-side date validation. (Actually on some pages, I don’t even display a text field. It looks like normal text; then you double-click on it; then a calendar appears then a date is selected (I wish it could also be cleared); when the calendar closes, the text looks like inline normal ([read-only] date) text again.

    My workaround seems to be that I will have to provide smaller icons. Their goal seems to be visual clarity (which I think is better placed in the large popup calendar than inline with a small or oversized icon). I’ll just be helping the Optometrists.

  5. Hi
    I use an altField and altFormat on a hidden field. The altFormat is simple ‘dd/mm/yy’ – independent of i18n. The visible format has written month name: ‘dd M yy’. I use the altField on server side.
    Problem is that when user clear the visible field, the alt field still has the old value. So the altField can not be cleared.

  6. Hi – I am also using a readonly field as a form of frontline validation. Only allowing the datePicker to fill the field enforces the format and the validity of the dates. I too would like the clear button, guess I will be adding my own..

  7. Does anyone have some example code showing how to add a clear button?

    I think its a little ridiculous that the jQuery UI people don’t think its necessary.

    Its a common use case I’ve seen many many times: The server requires dates in a specific format. So the field is set to read only, forcing the user to use the date picker. But once they select a date they can’t clear it! I am having issues now in several areas of our site because user’s can’t clear the date. We have many search forms that use dates, sometimes they put in a date but later want to pull it out after doing several searches. Right now they have to refresh the whole page, loosing all their other search criteria.

  8. I would also like a clear button, preferably configurable to appear or not.

    Concerning the client/server side validation of the date: My approach has always been, and will always be, that while client-side validation is convenient for the user, you should always validate server-side too, and be prepared to handle any errors generated there. Never rely exclusively on client-side scripts for data validation.

  9. Well, 1.8.7 is out and apparently they did not add the Clear button back in, or I cant find the functionality….

  10. I agree wholeheartedly with the above! The clear button is an absolute must.

    The so called work around that has been suggested by Scott (http://bugs.jqueryui.com/ticket/3999#comment:10) is a fail, because the button disappears after you navigate between months.

    It should be easily possible to add this button back to the datepicker, but simply display it only when a certain configuration flag is set to true.

    Are the folks at jQuery really that ignorant? I find that hard to believe given what they are capable of making.

  11. I solved the issue of clearing read-only date fields by adding a keydown trigger(keypress doesn’t work with delete and backspace keys):

    $(“#datefld”).keydown(function(event)
    {
    //if “backspace” or “delete” key pressed…
    if (event.which == 8 || event.which == 46)
    {
    $(this).val(“”);
    }
    }
    );

  12. Thanks Sayed, that worked well.
    Only change was to only use event.which == 8 for the delete key since backspace caused IE8 to navigate back (making it pointless.)
    Cheers.

  13. Old thread, I know, but for anyone else that stumbles across this in a Google search, this will let you use backspace or delete and prevent your browser from triggering a “back” function:

    $("#dateFieldID").keydown(function(event) {
    if (event.which === 8 || event.which === 46) {
    $(this).val("");
    }
    return false;
    });

  14. I found this site while searching Google.

    Please put the clear button back in and/or make it an option.

    Problem: Suzie using Datepicker inputs a warrant date in a Joe’s record and then Alice finds out that the warrant date was for Bill and tries to clear out Joe’s warrant date using Datepicker but can’t clear/null it out so poor Joe gets a warrant and Bill goes free.

Leave a Reply