JQuery datePicker日期重置

我想在日历底部的日期选择器中添加一个“重置”控件 – “关闭”控件的位置。 这将使用户能够将与datepicker绑定的输入重置为空白（无日期）。

我无法弄清楚如何编写绑定函数，具体来说，我如何获取绑定到控件的元素？

if (this.displayClear) { $pop.append( $('' + $.dpText.TEXT_CLEAR + '') .bind( 'click', function() { c.clearSelected(); //help! reset the value to '': $(this.something).val('') c._closeCalendar(); } ) ); } 

Answer 1

这是工作解决方案，只需在调用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"); $("Delete").appendTo(buttonPane).click(function(ev) { $.datepicker._clearDate(inst.input); }) ; } } 

Answer 2

我找到了一个更好的解决方案：

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

http://jsfiddle.net/swjw5w7q/1/

Answer 3

这将在Jquery日历上添加清除按钮，这将清除日期。

  $("#txtDOJ").datepicker({ showButtonPanel: true, closeText: 'Clear', onClose: function (dateText, inst) { if ($(window.event.srcElement).hasClass('ui-datepicker-close')) { document.getElementById(this.id).value = ''; } } }); 

Answer 4

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

2. 将取消按钮添加到日历

    $("#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 = $('Clear'); btn.unbind("click").bind("click", function () { $.datepicker._clearDate(input); }); btn.appendTo(buttonPane); }, 1); } }); 

Answer 5

我正在经历同样的问题，也就是说，没有可用于清空datepicker的选项。 然后我发现了这个超级有用的评论，其中包含一段很好的代码：

即使在只读字段上添加清除function的一种快捷方法是将以下代码添加到现有的datepicker控件：

 }).keyup(function(e) { if(e.keyCode == 8 || e.keyCode == 46) { $.datepicker._clearDate(this); } }); 

这将使人们能够突出显示（他们甚至可以在只读字段上），然后使用退格键或删除来使用内部_clearDate函数删除日期。

Answer 6

这是独家新闻

我们可以使用默认完成按钮来绑定自定义清除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 ); } }); 

奇迹般有效。 干杯:);）

学分：SébastienRenauld和BehranG BinA