如何清除/重置 jQuery UI Datepicker 日历上的选定日期?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/9435086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I clear/reset the selected dates on the jQuery UI Datepicker calendar?
提问by Cory Danielson
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 documentationand nothing jumped out as a solution. I also wasn't able to find a quick fix on a SO/google search
我一直在整理文档,没有什么可以作为解决方案跳出来的。我也无法在 SO/google 搜索中找到快速解决方案
http://jsfiddle.net/CoryDanielson/tF5MH/
http://jsfiddle.net/CoryDanielson/tF5MH/
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.
_.clearDate() 是 DatePicker 对象的私有方法。您不会在 jQuery UI 网站上的公共 API 中找到它,但它的作用就像一个魅力。
回答by Leniel Maccaferri
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.
人们将能够突出显示(甚至只读字段),然后使用退格键或删除键删除日期使用_clearDate
功能。
回答by DavidWainwright
Did you try:
你试过了吗:
$('selector').datepicker('setDate', null);
That should work according to the API documentation
这应该根据API 文档工作
回答by Simon Wang
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/
我已经改变了你的 jsfiddle:http: //jsfiddle.net/tF5MH/9/
回答by Soni Sharma
$('.date').datepicker('setDate', null);
回答by j08691
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 );
});
回答by sohaib
Try This, This Will Add Clear Button On Jquery Calender That Will Clear Date.
试试这个,这将在 Jquery 日历上添加清除按钮,将清除日期。
$("#DateField").datepicker({
showButtonPanel: true,
closeText: 'Clear',
onClose: function (dateText, inst) {
if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
{
document.getElementById(this.id).value = '';
}
}
});
回答by Mark W
Reset the max date attributes on your datepicker when you click clear.
单击清除时,重置日期选择器上的最大日期属性。
From jquery website
来自 jquery 网站
Get or set the maxDate option, after init.
//getter
var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
//setter
$( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );
回答by omarjebari
The obvious answer was the one that worked for me.
显而易见的答案是对我有用的答案。
$('#datepicker').val('');
where $('#datepicker') is the id of the input element.
其中 $('#datepicker') 是输入元素的 id。
回答by Miguel BinPar
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");
回答by Jain Abhishek
$("#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('');
}
}
});