JQuery datePicker 日期重置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4917779/
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
JQuery datePicker date reset
提问by KateYoak
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).
我想在日历底部的日期选择器中添加一个“重置”控件 - “关闭”控件所在的位置。这将使用户能够将绑定到 datepicker 的输入重置为空白（无日期）。
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();
}
)
);
}
回答by pma_
Here is working solution, just call cleanDatepicker() before any call to datepicker.
这是有效的解决方案，只需在调用 datepicker 之前调用 cleanDatepicker() 即可。
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);
}) ;
}
}
回答by vellotis
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('');
}
}
});
});
回答by sohaib
This Will Add Clear Button On Jquery Calender That Will Clear Date.
这将在将清除日期的 Jquery 日历上添加清除按钮。
$("#txtDOJ").datepicker({
showButtonPanel: true,
closeText: 'Clear',
onClose: function (dateText, inst) {
if ($(window.event.srcElement).hasClass('ui-datepicker-close')) {
document.getElementById(this.id).value = '';
}
}
});
回答by BehranG BinA
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(''); } }); });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); } });
将完成标签更改为清除并添加代码以清除
$(document).ready(function () { $("#startdate").datepicker({ showOn: 'both', buttonImageOnly: true, buttonImage: "css/images/calendar.gif", showButtonPanel: true, closeText: 'Clear', onClose: function (dateText, inst) { $(this).val(''); } }); });向日历添加取消按钮
$("#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); } });
回答by Leniel Maccaferri
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 _clearDatefunction.
这将使人们能够突出显示（他们甚至可以在只读字段上），然后使用退格键或删除键使用内部_clearDate函数删除日期。
回答by girish2040
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
学分：Sébastien Renauld 和 BehranG BinA
