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

Question

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.

Answer 1

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

Answer 2

Did you try:

$('selector').datepicker('setDate', null);

That should work according to the API documentation

Answer 3

you just need to set the options again to null:

dates.datepicker( "option" , {
    minDate: null,
    maxDate: null} );

I've changed your jsfiddle: http://jsfiddle.net/tF5MH/9/

Answer 4

$('.date').datepicker('setDate', null);

Answer 5

Try changing the clearing code to:

$('#clearDates').on('click', function(){
    dates.attr('value', '');
    $("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "maxDate", null );
    $("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "minDate", null );
});

Answer 6

Try This, This Will Add Clear Button On Jquery Calender That Will Clear Date.

$("#DateField").datepicker({
    showButtonPanel: true,
    closeText: 'Clear',
         onClose: function (dateText, inst) {
        if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
        {
            document.getElementById(this.id).value = '';
        }
    }
});

Answer 7

Reset the max date attributes on your datepicker when you click clear.

From jquery website

Get or set the maxDate option, after init.

    //getter
    var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
    //setter
    $( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );

Answer 8

The obvious answer was the one that worked for me.

$('#datepicker').val('');

where $('#datepicker') is the id of the input element.

Answer 9

I know it's a bit too late, but here's a simple peace of code that did it for me:

$('#datepicker-input').val('').datepicker("refresh");