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), th

Answer 1

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");

Answer 2

I use this code to clear the field and all shenannigans. I Needed an empty field for my use case

jQuery.datepicker._clearDate(window.firstDay);
window.firstDay.datepicker('setDate',null);
window.firstDay[0].value = '';

For some reason .val('') wouldn't work for me. But bypassing jQuery did it. In my opinion its a flaw that there is no .datepicker('clear') option.

Answer 3

The obvious answer was the one that worked for me.

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

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

Answer 4

My datepicker initialization looks like:

    dateOptions = {
                changeYear: true,
                changeMonth: true,
                dateFormat: 'dd/mm/yy',
                showButtonPanel: true,
                closeText: 'Clear',
            };

So, the default 'Done' button will have 'Clear' text.

Now, inside datepicker.js find internal function '_attachHandlers' It looks like:

 _attachHandlers: function (inst) {
            var stepMonths = this._get(inst, "stepMonths"),
                id = "#" + inst.id.replace(/\\\\/g, "\\");
            inst.dpDiv.find("[data-handler]").map(function () {
                var handler = {
                    prev: function () {...},
                    next: function () {...},
                    hide: function () {
                        $.datepicker._hideDatepicker();
                    },
                    today: function () {...}
                    ... 

And change hide function to look like:

                   ...
                   hide: function () {
                        $.datepicker._clearDate(id);
                        $.datepicker._hideDatepicker();
                    },
                    ...