Search code examples
jqueryjquery-uijquery-ui-datepicker

How do I clear/reset the selected dates on the jQuery UI Datepicker calendar?


How do I reset the datepicker calendar values?.. The min and max date restrictions?

The problem is that when I clear the dates (by deleting the textbox values), the previous date restrictions are still applied.

I've been sorting through the documentation and nothing jumped out as a solution. I also wasn't able to find a quick fix on a SO/google search

http://jsfiddle.net/CoryDanielson/tF5MH/


Solution:

// from & to input textboxes with datepicker enabled
var dates = $("input[id$='dpFrom'], input[id$='dpTo']");

// #clearDates is a button to clear the datepickers
$('#clearDates').on('click', function(){
    dates.attr('value', '');
    dates.each(function(){
        $.datepicker._clearDate(this);
    });
});​​

_.clearDate() is a private method of the DatePicker object. You won't find it in the public API on jQuery UI's website, but it works like a charm.


Solution

  • I was trying to accomplish this very thing, that is, empty the datepicker so that filters entered by the user could be removed. Googling a bit I found this sweet piece of code:

    You can add the clear feature even on read only fields. Just add the following code to your datepicker:

    }).keyup(function(e) {
        if(e.keyCode == 8 || e.keyCode == 46) {
            $.datepicker._clearDate(this);
        }
    });
    

    People will be able to highlight (even Read Only fields) and then use backspace or delete key to remove the date using _clearDate function.

    Source