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

Question

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

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

我一直在整理documentation并没有任何消息作为解决方案。我也无法找到SO /谷歌搜索的快速修复

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中找到它，但它就像一个魅力。

Answer 1

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

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

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

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

Source

Answer 2

你有没有尝试过：

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

根据API documentation

，这应该有效

Answer 3

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

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

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

Answer 4

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

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

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

Answer 7

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

来自jquery网站

Get or set the maxDate option, after init.

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

Answer 8

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

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

其中$（＆＃39; #datepicker＆＃39;）是输入元素的ID。

Answer 9

我知道这有点太晚了，但这是一个简单的代码安静，它为我做了：

public lineChartData:Array<any> = [
  {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
  {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
  {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
];

Answer 10

当文本字段没有焦点时，Leniel Macaferi的解决方案可以解释退格键是IE8中的“页面后退”快捷方式（当datepicker打开时似乎就是这种情况）。

它还使用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();
});

Answer 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: function () {
                        $.datepicker._clearDate(id);
                        $.datepicker._hideDatepicker();
                    },
                    ...

Answer 12

我使用此代码清除字段和所有shenannigans。我的用例需要一个空字段

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

出于某种原因，.val('')对我不起作用。但绕过jQuery做到了。 在我看来，这是一个没有.datepicker（'clear'）选项的缺陷。

Answer 13

我解决这个问题的方法

更改var＆＃39;控件＆＃39;在ui.js上

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 var

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

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

Answer 15

在Firefox中，它以表格形式（以编程方式）为我工作，默认情况下，日期选择控件处于禁用状态：

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

Answer 16

请尝试此解决方案，我会尝试正常工作

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

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