Category Archives: jquery

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!