JQuery datePicker 日期重置

Posted 2023-02-25

【中文标题】JQuery datePicker 日期重置

【英文标题】：JQuery datePicker date reset

【发布时间】：2011-06-22 12:18:01

【问题描述】：

我想在日历底部的日期选择器中添加一个“重置”控件 - “关闭”控件所在的位置。这将使用户能够将绑定到 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();
                    
                 )
           );
        

【问题讨论】：

this discussion 中有一些有用的答案。具体参见pfurbacher's sample implementation here。

How do I clear/reset the selected dates on the jQuery UI Datepicker calendar? 的可能副本

【参考方案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);
      ) ;
   

【讨论】：

优秀的解决方案...除了按钮标题是波兰语。另外，我建议把它放在 (function())();设置，而不是创建一个命名函数并稍后调用它。

为了让它工作，你必须将 datepicker 选项 showButtonPanel 设置为 true。

此解决方案是否适用于 AJAX 按钮，也就是说，该解决方案是否会导致 AJAX 提交到服务器时清除？

点击提交时如何防止相同日期输入重置？请告诉***.com/questions/69939209/…

【参考方案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/

【讨论】：

window.event 在 Firefox 中未定义。

不适用于最新版本code.jquery.com/ui/1.13.1/jquery-ui.js

【参考方案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 = '';
         
     
 );

【参考方案4】：

将完成标签更改为清除并添加代码以清除

$(document).ready(function () 
    $("#startdate").datepicker(
        showOn: 'both',
        buttonImageOnly: true,
        buttonImage: "css/images/calendar.gif",
        showButtonPanel: true,
        closeText: 'Clear',
        onClose: function (dateText, inst) 
            $(this).val('');
        
    );
);

向日历添加清除按钮（优点：习惯标准 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);
    
);

【讨论】：

2.当您更改月份或点击今天时，清除按钮会消失。

【参考方案5】：

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

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

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

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

【讨论】：

忽略手机/平板用户也没关系

在我的测试中，在只读字段中使用这样的退格按钮会触发 chrome 和 ie 中的后退按钮。但是，删除效果很好。您仍然会获得 +1，因为只读功能不是所问问题的一部分。

【参考方案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

【讨论】：

@Sébastien Renauld 清除按钮在您随机播放月份时将不可用。结帐link