How do I clear/reset the selected dates on the jQuery UI Datepicker calendar?
JqueryJquery UiJquery Ui-DatepickerJquery Problem Overview
How do I reset the datepicker calendar values?.. The min and max date restrictions?
The problem is that when I clear the dates (by deleting the textbox values), the previous date restrictions are still applied.
I've been sorting through the http://docs.jquery.com/UI/Datepicker">documentation</a> and nothing jumped out as a solution. I also wasn't able to find a quick fix on a SO/google search
http://jsfiddle.net/CoryDanielson/tF5MH/">http://jsfiddle.net/CoryDanielson/tF5MH/</a>
Solution:
// from & to input textboxes with datepicker enabled
var dates = $("input[id$='dpFrom'], input[id$='dpTo']");
// #clearDates is a button to clear the datepickers
$('#clearDates').on('click', function(){
dates.attr('value', '');
dates.each(function(){
$.datepicker._clearDate(this);
});
});
_.clearDate() is a private method of the DatePicker object. You won't find it in the public API on jQuery UI's website, but it works like a charm.
Jquery Solutions
Solution 1 - Jquery
I was trying to accomplish this very thing, that is, empty the datepicker so that filters entered by the user could be removed. Googling a bit I found this sweet piece of code:
You can add the clear feature even on read only fields. Just add the following code to your datepicker:
}).keyup(function(e) {
if(e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
});
People will be able to highlight (even Read Only fields) and then use backspace or delete key to remove the date using _clearDate function.
Solution 2 - Jquery
Did you try:
$('selector').datepicker('setDate', null);
That should work according to the API documentation
Solution 3 - Jquery
you just need to set the options again to null:
dates.datepicker( "option" , {
minDate: null,
maxDate: null} );
I've changed your jsfiddle: http://jsfiddle.net/tF5MH/9/
Solution 4 - Jquery
$('.date').datepicker('setDate', null);
Solution 5 - Jquery
Try changing the clearing code to:
$('#clearDates').on('click', function(){
dates.attr('value', '');
$("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "maxDate", null );
$("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "minDate", null );
});
Solution 6 - Jquery
Try This, This Will Add Clear Button On Jquery Calender That Will Clear Date.
$("#DateField").datepicker({
showButtonPanel: true,
closeText: 'Clear',
onClose: function (dateText, inst) {
if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
{
document.getElementById(this.id).value = '';
}
}
});
Solution 7 - Jquery
Reset the max date attributes on your datepicker when you click clear.
From jquery website
Get or set the maxDate option, after init.
//getter
var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
//setter
$( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );
Solution 8 - Jquery
The obvious answer was the one that worked for me.
$('#datepicker').val('');
where $('#datepicker') is the id of the input element.
Solution 9 - Jquery
I know it's a bit too late, but here's a simple peace of code that did it for me:
$('#datepicker-input').val('').datepicker("refresh");
Solution 10 - Jquery
A modified version of Leniel Macaferi's solution to account for the backspace key being a "page back" shortcut in IE8 when a text field does not have focus (which appears to be the case when datepicker is open).
It also uses val() to clear the field since _clearDate(this) did not work for me.
$("#clearDates").datepicker().keyup(function (e) {
// allow delete key (46) to clear the field
if (e.keyCode == 46)
$(this).val("");
// backspace key (8) causes 'page back' in IE8 when text field
// does not have focus, Bad IE!!
if (e.keyCode == 8)
e.stopPropagation();
});
Solution 11 - Jquery
My datepicker initialization looks like:
dateOptions = {
changeYear: true,
changeMonth: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: true,
closeText: 'Clear',
};
So, the default 'Done' button will have 'Clear' text.
Now, inside datepicker.js find internal function '_attachHandlers' It looks like:
_attachHandlers: function (inst) {
var stepMonths = this._get(inst, "stepMonths"),
id = "#" + inst.id.replace(/\\\\/g, "\\");
inst.dpDiv.find("[data-handler]").map(function () {
var handler = {
prev: function () {...},
next: function () {...},
hide: function () {
$.datepicker._hideDatepicker();
},
today: function () {...}
...
And change hide function to look like:
...
hide: function () {
$.datepicker._clearDate(id);
$.datepicker._hideDatepicker();
},
...
Solution 12 - Jquery
I use this code to clear the field and all shenannigans. I Needed an empty field for my use case
jQuery.datepicker._clearDate(window.firstDay);
window.firstDay.datepicker('setDate',null);
window.firstDay[0].value = '';
For some reason .val('') wouldn't work for me. But bypassing jQuery did it.
In my opinion its a flaw that there is no .datepicker('clear') option.
Solution 13 - Jquery
My way to solve this problem
Change var 'controls' on ui.js
controls = (!inst.inline ? "<button type='button' class='ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
this._get(inst, "closeText") + "</button>" + "<button type='button' class='ui-datepicker-close ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
this._get(inst, "clearText") + "</button>" : "");
Then add a clearText var
this.regional[""] = { // Default regional settings
closeText: "Done", // Display text for close link
clearText: "Clear", // Display text for close link
prevText: "Prev", // Display text for previous month link
And before show function
$(".i_date").datepicker
(
{
beforeShow: function (input, inst)
{
setTimeout
(
function ()
{
$('.ui-datepicker-clear').bind('click', function() { $(input).val(''); });
},
0
);
}
}
);
Solution 14 - Jquery
$("#datepicker").datepicker({
showButtonPanel: true,
closeText: 'Clear',
onClose: function () {
var event = arguments.callee.caller.caller.arguments[0];
if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
$(this).val('');
}
}
});
Solution 15 - Jquery
In Firefox it does job for me in form (programmatically), where datepicker control is disabled by default:
$("#txtDat2").prop('disabled', false); //temporary enable controls<br>
$("#txtDat2").val("YYYY-MM-DD"); //reset date to dd.mm.yyyyy
$("#txtDat2").prop('disabled', true); //back to default state
Solution 16 - Jquery
Please try this solution it will work properly as I have tried
$('selector').datepicker('setStartDate', 0);
$('selector').datepicker('setEndDate', 0);
$('selector').datepicker('update');