Cory Danielson Cory Danielson - 1 year ago 256
jQuery Question

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


// 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', '');

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

Answer Source

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

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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download