JQuery datePicker date reset

Question

I would like to add a "Reset" control to the datepicker at the bottom of the calendar - where the "close" control goes. This would enable the user to reset the input tied to datepicker to blank (no date).

I can't figure out how to write the bind function, specifically, how do I get a hold of the element bound to the control?

        if (this.displayClear) {
           $pop.append(
              $('<a href="#" id="dp-clear">' + $.dpText.TEXT_CLEAR + '</a>')
                 .bind(
                    'click',
                    function()
                    {
                          c.clearSelected();
                          //help! reset the value to '': $(this.something).val('')
                          c._closeCalendar();
                    }
                 )
           );
        }

There are some useful answers in [this discussion](http://bugs.jqueryui.com/ticket/3999). See, specifically, [pfurbacher's sample implementation here](http://jsbin.com/ofare/edit). — Ori, Feb 07 '11 at 03:49
possible duplicate of [How do I clear/reset the selected dates on the jQuery UI Datepicker calendar?](http://stackoverflow.com/questions/9435086/how-do-i-clear-reset-the-selected-dates-on-the-jquery-ui-datepicker-calendar) — freemanoid, Apr 10 '15 at 19:58

score 21 · Accepted Answer · edited Mar 08 '17 at 12:33

21

Here is working solution, just call cleanDatepicker() before any call to datepicker.

function cleanDatepicker() {
   var old_fn = $.datepicker._updateDatepicker;

   $.datepicker._updateDatepicker = function(inst) {
      old_fn.call(this, inst);

      var buttonPane = $(this).datepicker("widget").find(".ui-datepicker-buttonpane");

      $("<button type='button' class='ui-datepicker-clean ui-state-default ui-priority-primary ui-corner-all'>Delete</button>").appendTo(buttonPane).click(function(ev) {
          $.datepicker._clearDate(inst.input);
      }) ;
   }
}

edited Mar 08 '17 at 12:33

Alexei - check Codidact

22,016
16
145
164

answered Aug 04 '11 at 12:31

pma_

810
1
8
9

1

Excellent solution... except that the button title is in Polish. Also, I'd suggest putting this in a (function(){})(); setup, rather than creating a named function and calling it later. – Brilliand Mar 27 '12 at 02:34
2

In order for this to work, you have to set the datepicker option showButtonPanel to true. – deerchao Dec 07 '12 at 09:05
Does this solution work for AJAXed buttons, that is, does that solution cause an AJAX submit to the server on clear? – Kawu Jan 09 '13 at 12:16
How to prevent the same date input from resetting when clicking on submit? please tell https://stackoverflow.com/questions/69939209/how-to-prevent-jquery-datepicker-from-clearing-date-on-submit-in-jsp – Sanjay Sahani Nov 12 '21 at 07:41

vellotis · Answer 2 · 2015-01-21T09:47:43.780

19

I found a nicer solution:

$(document).ready(function () {
    $(".datepicker").datepicker({
            showOn: 'focus',
            showButtonPanel: true,
            closeText: 'Clear', // Text to show for "close" button
            onClose: function () {
                var event = arguments.callee.caller.caller.arguments[0];
                // If "Clear" gets clicked, then really clear it
                if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
                    $(this).val('');
                }
            }
    });
});

http://jsfiddle.net/swjw5w7q/1/

edited Jan 21 '15 at 09:47

answered Apr 03 '13 at 22:49

vellotis

829
1
12
26

1

window.event is undefined in Firefox. – inputError Jan 20 '15 at 16:40
Not working with latest version https://code.jquery.com/ui/1.13.1/jquery-ui.js – Developer Feb 26 '22 at 05:40

score 9 · Answer 3 · edited Aug 05 '15 at 03:44

9

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

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

edited Aug 05 '15 at 03:44

userlond

3,632
2
36
53

answered Sep 17 '13 at 07:06

sohaib

837
1
12
10

score 6 · Answer 4 · edited Apr 19 '21 at 12:18

Change the Done label to Clear and add code to clear

$(document).ready(function () {
    $("#startdate").datepicker({
        showOn: 'both',
        buttonImageOnly: true,
        buttonImage: "css/images/calendar.gif",
        showButtonPanel: true,
        closeText: 'Clear',
        onClose: function (dateText, inst) {
            $(this).val('');
        }
    });
});

Add Clear button to the calendar (pros: users who are used to standard jQuery-UI Calendar won't confuse the Clear button for Close)

function addClearBtnToCalendar(inst) {
    setTimeout(function () {
        var buttonPane = $(inst).datepicker("widget")
            .find(".ui-datepicker-buttonpane");
        var btn = $('<button class="ui-datepicker-current'
             + ' ui-state-default ui-priority-secondary ui-corner-all"'
             + ' type="button">Clear</button>');
        btn.unbind("click").bind("click", function () {
             $.datepicker._clearDate(inst.input);
        });
        btn.appendTo(buttonPane);
    }, 1);
}

$("#termdate").datepicker({
    showOn: 'both',
    buttonImageOnly: true,
    buttonImage: "css/images/calendar.gif",
    showButtonPanel: true,
    beforeShow: function (input, inst) {
        addClearBtnToCalendar(inst);
    },
    onChangeMonthYear: function (year, month, inst) {
        addClearBtnToCalendar(inst);
    }
});

2. The Clear button disappears when you change a month or click Today. — Vasiliy Zverev, Apr 16 '21 at 18:25

score 3 · Answer 5 · answered Sep 29 '12 at 04:32

3

I was going through this same problem, that is, no option available to empty the datepicker. I then found this super useful comment with a sweet piece of code posted here:

One quick way you can add the clear feature even on read only fields is to add the following code to your existing datepicker control:

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

This will enable people to highlight (which they can even on Read Only fields) and then use the backspace or delete to remove the date using the internal _clearDate function.

answered Sep 29 '12 at 04:32

Leniel Maccaferri

100,159
46
371
480

1

That's ok if you ignore the mobile/tablet users – Mathieu Dec 04 '12 at 13:55
1

In my testing, using the backspace button like this in a readOnly field triggers the back button in chrome and ie. However, the delete works great. You still get +1 because the read only functionality isn't part of the question asked. – SyntaxRules Jun 21 '13 at 18:40

score 0 · Answer 6 · answered May 28 '13 at 07:28

Here is the scoop

We can use default done button to bind a custom clear function.

$("#date_picker").datepicker({minDate:myDate,dateFormat: 'yy-mm-dd',showButtonPanel:true,closeText:'Clear',
    beforeShow: function( input ) {
        setTimeout(function() {
        var clearButton = $(input )
            .datepicker( "widget" )
            .find( ".ui-datepicker-close" );
        clearButton.unbind("click").bind("click",function(){$.datepicker._clearDate( input );});
        }, 1 );
    }
});

Works like a charm. Cheers :);)

credits: Sébastien Renauld and BehranG BinA

@Sébastien Renauld clear button will not be available if you shuffle months. checkout [link](http://jsbin.com/ofare/451/edit) — girish2040, May 28 '13 at 07:43

JQuery datePicker date reset

6 Answers6

Linked