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