How to Add Reset Button in jQuery UI Datepicker

698

I am using the jQuery UI date picker plugin to add the date picker dialog to the text input field. Since the input field is a read-only element, it is not allowed to clear the selected date. Is there any option to add a reset button in the date picker to clear the date from the input field as well as the date picker?

Here is my code to attach the date picker to the HTML input element using the jQuery UI library.

<input type="text" id="datepicker" readonly="readonly">

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

Related Posts