jQuery UI datepicker reset date

Question

I have a datepicker that's on an input field, default date when I first open it is today's date, which is what I want.
However, when I select a date and I clear the input field, the datepicker still has the selected date on it, which I don't want

Does anyone have an idea why this happens and how I can prevent this behavior?

What do you mean by select a date and clear input field ? is is that you are directly clearing input field without invoking datepicker on that field and clearing it ? — dreamweiver, Jun 03 '13 at 10:55
Use $.datepicker._clearDate(this); in here this is your input field — Dineshkani, Jun 03 '13 at 10:55
would you have just read datepicker's manual? if not check http://jqueryui.com/datepicker/ — Sina R., Jun 03 '13 at 10:56
Refer this link http://stackoverflow.com/questions/9435086/jquery-ui-datepicker-how-do-i-clear-reset-the-datepicker-calendar and try http://jsfiddle.net/tF5MH/9/ — Dineshkani, Jun 03 '13 at 11:01

silkfire · Answer 1 · 2015-05-11T20:59:06.893

37

The proper way to reset the date of a Datepicker widget is like this:

$.datepicker._clearDate('#input_field_goes_here');

Or like this:

$('#input_field_goes_here').datepicker('setDate', null);

Whichever works best for you.

edited May 11 '15 at 20:59

answered Jun 03 '13 at 10:57

silkfire

24,585
15
82
105

4

The second one is the more official answer. Using the private API is a bad idea. – Guido Bouman Jun 25 '15 at 14:06
Agreed. The second one is the best one. – nurider Jan 13 '16 at 21:56

Alex Gill · Accepted Answer · 2016-05-03T16:19:05.847

12

See http://codepen.io/alexgill/pen/yOQrwV

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

edited May 03 '16 at 16:19

answered Jun 03 '13 at 10:54

Alex Gill

2,395
1
16
18

exactly, _ API is always private – Ahmed Hashem May 03 '16 at 10:45
That's great, but the year doesn't reset – David Bradley Apr 11 '20 at 02:03
So I ended up doing $(SELECTOR).datepicker('setDate', new Date()); and then $(SELECTOR).datepicker('setDate', null); to get the year reset as well – David Bradley Apr 11 '20 at 02:07

score 7 · Answer 3 · answered Oct 18 '16 at 09:58

7

Clear button in calendar.

 $("#txtCalendar").datepicker({
        showButtonPanel: true,
        closeText: 'Clear',
        onClose: function (dateText, obj) {
            if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
                $("#txtCalendar").val('');
        }
    });

answered Oct 18 '16 at 09:58

Shahbaz Ahmad

161
1
9

4

great but changed $("#txtCalendar").val(''); to $(this).val(''); for multiple instances – Barry Dowd Jan 18 '17 at 07:01
@BarryDowd This looks clever. However I get `window.event is undefined` (at least in Firefox). Any workaround? Thanks! – SeaBass Aug 21 '18 at 18:15
@SeaBass the example is using a deprecated reference (`window.event.srcElement`), in order to make it work, you need to replace it with `event.target`. Reference: https://developer.mozilla.org/en-US/docs/Web/API/Event/srcElement – funder7 Sep 20 '21 at 21:17

score 1 · Answer 4 · answered Oct 06 '17 at 05:35

1

Just add this code

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

You can use backspace to clear field even if it has in read only mode. Source

answered Oct 06 '17 at 05:35

PIYUSH Itspk

13
1
9

I had to use `$( dateInput ).attr( "value", null )` instead of `_clearDate`. – Joshua Pinter May 29 '19 at 15:40

score 0 · Answer 5 · answered Apr 11 '20 at 02:15

To really reset everything, including the selected year in the date selector popup, I had to do the following:

$(SELECTOR).datepicker('setDate', new Date());
$(SELECTOR).datepicker('setDate', null);

Just doing the last line results in the previously selected year to show in the date selector

jQuery UI datepicker reset date

5 Answers5