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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9435086/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 10:48:36  来源:igfitidea点击:

How do I clear/reset the selected dates on the jQuery UI Datepicker calendar?

jqueryjquery-uijquery-ui-datepicker

提问by Cory Danielson

How do I reset the datepicker calendar values?.. The min and max date restrictions?

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

The problem is that when I clear the dates (by deleting the textbox values), the previous date restrictions are still applied.

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

I've been sorting through the documentationand nothing jumped out as a solution. I also wasn't able to find a quick fix on a SO/google search

我一直在整理文档,没有什么可以作为解决方案跳出来的。我也无法在 SO/google 搜索中找到快速解决方案

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

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



Solution:

解决方案:

// 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() is a private method of the DatePicker object. You won't find it in the public API on jQuery UI's website, but it works like a charm.

_.clearDate() 是 DatePicker 对象的私有方法。您不会在 jQuery UI 网站上的公共 API 中找到它,但它的作用就像一个魅力。

回答by Leniel Maccaferri

I was trying to accomplish this very thing, that is, empty the datepicker so that filters entered by the user could be removed. Googling a bit I found this sweet piece of code:

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

You can add the clear feature even on read only fields. Just add the following code to your datepicker:

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

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

People will be able to highlight (even Read Only fields) and then use backspace or delete key to remove the date using _clearDatefunction.

人们将能够突出显示(甚至只读字段),然后使用退格键或删除键删除日期使用_clearDate功能。

Source

来源

回答by DavidWainwright

Did you try:

你试过了吗:

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

That should work according to the API documentation

这应该根据API 文档工作

回答by Simon Wang

you just need to set the options again to null:

你只需要再次将选项设置为空:

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

I've changed your jsfiddle: http://jsfiddle.net/tF5MH/9/

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

回答by Soni Sharma

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

回答by j08691

Try changing the clearing code to:

尝试将清算代码更改为:

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

回答by sohaib

Try This, This Will Add Clear Button On Jquery Calender That Will Clear Date.

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

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

回答by Mark W

Reset the max date attributes on your datepicker when you click clear.

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

From jquery website

来自 jquery 网站

Get or set the maxDate option, after init.

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

回答by omarjebari

The obvious answer was the one that worked for me.

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

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

where $('#datepicker') is the id of the input element.

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

回答by Miguel BinPar

I know it's a bit too late, but here's a simple peace of code that did it for me:

我知道这有点太晚了,但这里有一个简单的代码和平,为我做到了:

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

回答by Jain Abhishek

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