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 tie

Answer 1

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/

Answer 2

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

Answer 3

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 Cancel button to the calendar

   $("#termdate").datepicker({
       showOn: 'both',
       buttonImageOnly: true,
       buttonImage: "css/images/calendar.gif",
       showButtonPanel: true,
       beforeShow: function (input) {
           setTimeout(function () {
               var buttonPane = $(input).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(input);
               });
               btn.appendTo(buttonPane);
           }, 1);
       }
   });
   

Answer 4

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 = '';
         }
     }
 });

Answer 5

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

Answer 6

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.