JQuery datePicker 日期重置

Question

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

我不知道如何编写绑定函数，具体来说，如何获取绑定到控件的元素？

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

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");

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

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. 向日历添加清除按钮（优点：习惯标准 jQuery-UI 日历的用户不会将清除按钮与关闭混淆）

   function addClearBtnToCalendar(inst) {
       setTimeout(function () {
           var buttonPane = $(inst).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(inst.input);
           });
           btn.appendTo(buttonPane);
       }, 1);
   }
   
   $("#termdate").datepicker({
       showOn: 'both',
       buttonImageOnly: true,
       buttonImage: "css/images/calendar.gif",
       showButtonPanel: true,
       beforeShow: function (input, inst) {
           addClearBtnToCalendar(inst);
       },
       onChangeMonthYear: function (year, month, inst) {
           addClearBtnToCalendar(inst);
       }
   });
   

Answer 5

我遇到了同样的问题，也就是说，没有可用的选项来清空日期选择器。然后我发现这条超级有用的评论带有一段甜蜜的代码发布here：

即使在只读字段上也可以添加清除功能的一种快速方法是将以下代码添加到现有的日期选择器控件中：

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

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

Answer 6

这是独家新闻

我们可以使用默认的完成按钮来绑定自定义清除功能。

$("#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ébastien Renauld 和 BehranG BinA