18

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();
                    }
                 )
           );
        }
2

6 Answers 6

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);
      }) ;
   }
}
4
  • 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, 2012 at 2:34
  • 2
    In order for this to work, you have to set the datepicker option showButtonPanel to true.
    – deerchao
    Dec 7, 2012 at 9:05
  • Does this solution work for AJAXed buttons, that is, does that solution cause an AJAX submit to the server on clear?
    – Kawu
    Jan 9, 2013 at 12:16
  • How to prevent the same date input from resetting when clicking on submit? please tell stackoverflow.com/questions/69939209/… Nov 12, 2021 at 7:41
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/

2
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 = '';
         }
     }
 });
0
6
  1. 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('');
            }
        });
    });
    
  2. 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);
        }
    });
    
1
  • 2. The Clear button disappears when you change a month or click Today. Apr 16, 2021 at 18:25
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.

2
  • 1
    That's ok if you ignore the mobile/tablet users
    – Mathieu
    Dec 4, 2012 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. Jun 21, 2013 at 18:40
0

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

1
  • @Sébastien Renauld clear button will not be available if you shuffle months. checkout link
    – girish2040
    May 28, 2013 at 7:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.