如何清除/重置 jQuery UI Datepicker 日历上的选定日期？

Posted 2023-05-07

【中文标题】如何清除/重置 jQuery UI Datepicker 日历上的选定日期？

【英文标题】：How do I clear/reset the selected dates on the jQuery UI Datepicker calendar?

【发布时间】：2012-03-15 03:49:06

【问题描述】：

如何重置日期选择器日历值？.. 最小和最大日期限制？

问题是当我清除日期（通过删除文本框值）时，仍然应用以前的日期限制。

我一直在整理documentation，但没有找到任何解决方案。我也无法在 SO/google 搜索中找到快速解决方法

http://jsfiddle.net/CoryDanielson/tF5MH/

---

解决方法：

// 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() 是 DatePicker 对象的私有方法。你不会在 jQuery UI 网站上的公共 API 中找到它，但它就像一个魅力。

【参考方案1】：

我正试图完成这件事，即清空日期选择器，以便可以删除用户输入的过滤器。谷歌搜索了一下，我发现了这段甜蜜的代码：

您甚至可以在只读字段上添加清除功能。只需将以下代码添加到您的日期选择器：

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

人们将能够突出显示（甚至是只读字段），然后使用退格键或删除键使用_clearDate 函数删除日期。

Source

【讨论】：

哇。为什么不公开？！它也被排除在 jQuery UI 上的 API 之外......没有任何意义。 ----我编辑了您的帖子，以便解决方案更好地匹配我的问题。很好的发现

接受我的编辑，我调整了您的答案以匹配我的问题，而不是复制/粘贴不完整代码的转储

您的编辑不是已经激活了吗？我看不到接受您的编辑的选项... :)

不，没关系。我认为我的原始帖子和您的解决方案都将帮助几乎所有找到此页面的人。也许一些关于 keyCode 8 和 46 是什么或者 this 到底是什么在 _clearDates()

你把这个放在哪里？

【参考方案2】：

你试过了吗：

$('selector').datepicker('setDate', null);

这应该根据API documentation工作

【讨论】：

我有一个带有一些日期选择器输入的表单，我用它来编辑我想根据当前日期填写的一些日期。我发现这个解决方案可以在将“setDate”与当前日期一起使用之前重置我的编辑表单，但我有一个格式问题：没有('setDate', null) 我有我想要的格式(DD/MM/YYYY)，但是当我使用它时，我有 MM/DD/YYYY...唯一的区别是使用 ('setDate', null)，知道为什么吗？

对不起 Mickael - 我不知道。根据***.com/questions/1328025/… 将日期设置为空后，您是否尝试过重置格式？

【参考方案3】：

您只需将选项再次设置为 null：

dates.datepicker( "option" , 
    minDate: null,
    maxDate: null );

我已经改变了你的 jsfiddle：http://jsfiddle.net/tF5MH/9/

【讨论】：

好的，谢谢。你是对的。有趣的是，这个问题甚至在 jQuery UI Datepicker Demo 页面上也存在。 jqueryui.com/demos/datepicker/#date-range设置to date，然后清空文本框，问题存在

这是最干净的方式，当然。 date.datepicker( "option" , setDate: null, minDate: null, maxDate: null );

【参考方案4】：

$('.date').datepicker('setDate', null);

【参考方案5】：

尝试将清除代码更改为：

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

【参考方案6】：

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

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

【讨论】：

这个答案可能比其他答案更好，即使它在 Firefox 中不起作用。将document.getElementById(this.id).value = ''; 替换为$(this).val('').change(); 会更好，因为任何已建立的更改处理程序也会被调用。

【参考方案7】：

单击清除时重置日期选择器上的最大日期属性。

来自 jquery 网站

Get or set the maxDate option, after init.

    //getter
    var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
    //setter
    $( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );

【讨论】：

是的，你是对的。我将 j08691 标记为最佳答案，因为他给了我一些代码，我可以将其放入有效的小提琴中。不幸的是，我无法将它们都标记为最佳：/

是的，我知道，我打算用一些与您的问题相关的代码更好地解释它，但他打败了我。 :)

【参考方案8】：

显而易见的答案是对我有用的那个。

$('#datepicker').val('');

其中 $('#datepicker') 是输入元素的 id。

【讨论】：

我在 JSFiddle 中尝试了该解决方案，但没有成功。 jsfiddle.net/tF5MH/407 请参阅输入下方的复制步骤。使用.val('') 将清空输入，但不会清除日历中的日期选择器限制。

我也试过最新版的jQu​​ery UI（v1.12.0），还是不行。

非常感谢奥马尔。从过去 20 分钟开始，我一直在寻找这个工作解决方案。你是一个救命的人！..

【参考方案9】：

我知道这有点太晚了，但这里有一个简单的代码为我完成了它：

$('#datepicker-input').val('').datepicker("refresh");

【讨论】：

我看不出刷新有什么额外作用。您可以清除该值。

我喜欢您使用公共调用与私有函数来清除控制权。

@Miguel BinPar ，我知道这篇文章已经过时，但在我尝试了 3 天之后，您的答案是唯一对我有用的答案。谢谢！

【参考方案10】：

Leniel Macaferi 解决方案的修改版本，当文本字段没有焦点时（在打开日期选择器时似乎是这种情况），退格键是 IE8 中的“返回页”快捷方式。

它还使用val() 清除字段，因为_clearDate(this) 对我不起作用。

$("#clearDates").datepicker().keyup(function (e) 
    // allow delete key (46) to clear the field
    if (e.keyCode == 46)
        $(this).val("");

    // backspace key (8) causes 'page back' in IE8 when text field
    // does not have focus, Bad IE!!
    if (e.keyCode == 8)
        e.stopPropagation();
);

【参考方案11】：

我的 datepicker 初始化如下：

    dateOptions = 
                changeYear: true,
                changeMonth: true,
                dateFormat: 'dd/mm/yy',
                showButtonPanel: true,
                closeText: 'Clear',
            ;

因此，默认的 '完成' 按钮将具有 '清除' 文本。

现在，在 datepicker.js 中找到内部函数 '_attachHandlers' 它看起来像：

 _attachHandlers: function (inst) 
            var stepMonths = this._get(inst, "stepMonths"),
                id = "#" + inst.id.replace(/\\\\/g, "\\");
            inst.dpDiv.find("[data-handler]").map(function () 
                var handler = 
                    prev: function () ...,
                    next: function () ...,
                    hide: function () 
                        $.datepicker._hideDatepicker();
                    ,
                    today: function () ...
                    ... 

并将 hide 函数更改为：

                   ...
                   hide: function () 
                        $.datepicker._clearDate(id);
                        $.datepicker._hideDatepicker();
                    ,
                    ...

【参考方案12】：

我使用此代码来清除场地和所有恶作剧。我的用例需要一个空白字段

jQuery.datepicker._clearDate(window.firstDay);
window.firstDay.datepicker('setDate',null);
window.firstDay[0].value = '';

出于某种原因，.val('') 不适合我。但是绕过 jQuery 做到了。 在我看来，没有 .datepicker('clear') 选项是一个缺陷。

【参考方案13】：

解决这个问题的方法

在 ui.js 上更改 var 'controls'

controls = (!inst.inline ? "<button type='button' class='ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
        this._get(inst, "closeText") + "</button>" + "<button type='button' class='ui-datepicker-close ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
        this._get(inst, "clearText") + "</button>" : "");

然后添加一个 clearText 变量

    this.regional[""] =  // Default regional settings
    closeText: "Done", // Display text for close link
    clearText: "Clear", // Display text for close link
    prevText: "Prev", // Display text for previous month link

和之前的显示功能

$(".i_date").datepicker
(
    
        beforeShow: function (input, inst)
        
            setTimeout
            (
                function () 
                 
                    $('.ui-datepicker-clear').bind('click', function()  $(input).val(''); );
                , 
                0
            );
        
    
);

【参考方案14】：

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

【参考方案15】：

在 Firefox 中，它以形式（以编程方式）为我工作，默认情况下禁用 datepicker 控件：

$("#txtDat2").prop('disabled', false); //temporary enable controls<br>
$("#txtDat2").val("YYYY-MM-DD"); //reset date to dd.mm.yyyyy
$("#txtDat2").prop('disabled', true); //back to default state

【参考方案16】：

请尝试这个解决方案，它会像我尝试过的那样正常工作

$('selector').datepicker('setStartDate', 0);

 $('selector').datepicker('setEndDate', 0);
$('selector').datepicker('update');