From the category archives:

JavaScript

No Clear Button in JQueryUI Date Picker

by Bruce on September 28, 2010

I have the following situation… we are using a jqueryui datepicker, with a hidden “altField”, and the visible input field is editable.

We need the ability to clear the date, but there does not appear to be a “clear” button option for the calendar pop-up after v1.6 of jqueryUI.  You can press CTRL-END, but we don’t feel that’s an acceptable solution alone.  Because the visible input is editable you can clear the date from the the field with your delete keys.  However, when you clear it that way the altField does not get cleared, so the change is not saved to the database.

I fixed the problem using the “onClose” event provided by the datepicker control and detected the blank input field and cleared the value from the altField.  See code below.

It’s not all that elegant but thought  someone might benefit from a quick fix to this GAPING OMISSION from the jqueryUI datepicker.  There is a bug filed, so hopefully they add the clear button back in soon.

<span>Very Important Date</span>
<input type="hidden" id="importantDate" value="">
<input type="text" id="important_date">
<button type="button">
    <img src="../images/icon_calendar.gif">
</button>
$('#important_date').datepicker({
    showOn:'both', 
    altField:'#importantDate', 
    altFormat: '@', 
    onClose:clearBlankDates 
});

function clearBlankDates(dateText, inst) {
    if (dateText == null) {
        $($(this).data("datepicker").settings.altField).val('');
    }
}

Note: I wanted to get the altField from “inst” or “this” using the documented “getter” like this …datepicker( “option”, “altField” ); but I could not get it to work.

{ 0 comments }