jQuery UI日期选择器重置日期

Question

我有一个与输入字段相关的 日期选择器，第一次打开时默认日期是今天，这正是我想要的。
然而，当我选择一个日期并清除输入字段时，日期选择器 仍然保留所选日期，这不是我想要的。

有没有人知道为什么会出现这种情况，以及我如何防止这种行为？

- J.Pip

---

请发布你的代码。 - vlio20

选择日期和清空输入框的意思是什么？这是否意味着您直接在不调用日期选择器的情况下清除输入字段并将其清空？ - dreamweiver

在这里使用 $.datepicker._clearDate(this);，其中 this 是您的输入字段。 - Dineshkani

你刚才有没有看过日期选择器的手册？如果没有，请查看http://jqueryui.com/datepicker/。 - Sina R.

请参考此链接https://dev59.com/9mox5IYBdhLWcg3wGwlo并尝试http://jsfiddle.net/tF5MH/9/。 - Dineshkani

Answer 1

重置 Datepicker 组件的日期的正确方法如下：

$.datepicker._clearDate('#input_field_goes_here');

或者像这样：

$('#input_field_goes_here').datepicker('setDate', null);

无论哪种方式对你最有效。

- silkfire

---

第二个答案更正式。使用私人API是一个不好的主意。 - Guido Bouman

同意。第二个是最好的。 - nurider

Answer 2

请查看http://codepen.io/alexgill/pen/yOQrwV

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

- Alex Gill

---

API始终是私有的。 - Ahmed Hashem

太好了，但是年份不会重置。 - David Bradley

所以最终我执行了 $(SELECTOR).datepicker('setDate', new Date()); 然后 $(SELECTOR).datepicker('setDate', null); 来重置年份。 - David Bradley

Answer 3

日历中的清除按钮。

 $("#txtCalendar").datepicker({
        showButtonPanel: true,
        closeText: 'Clear',
        onClose: function (dateText, obj) {
            if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
                $("#txtCalendar").val('');
        }
    });

- Shahbaz Ahmad

---

优秀，但为了多次实例，请将 $("#txtCalendar").val(''); 更改为 $(this).val('');。 - Barry Dowd

@BarryDowd 这看起来很聪明。但是我在Firefox中得到了“window.event未定义”的错误。有什么解决方法吗？谢谢！ - SeaBass

@SeaBass 这个例子使用了一个已经被弃用的引用(window.event.srcElement)，为了让它正常工作，你需要将其替换为event.target。参考链接：https://developer.mozilla.org/en-US/docs/Web/API/Event/srcElement - funder7

Answer 4

只需添加此代码。

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

即使字段处于只读模式，您仍然可以使用退格键清除字段。源代码

- PIYUSH Itspk

---

我不得不使用 $( dateInput ).attr( "value", null ) 而不是 _clearDate。 - Joshua Pinter

Answer 5

为了真正地重置所有内容，包括日期选择器弹出窗口中所选的年份，我必须执行以下操作：

$(SELECTOR).datepicker('setDate', new Date());
$(SELECTOR).datepicker('setDate', null);

只需执行最后一行代码，就会在日期选择器中显示先前选择的年份

- David Bradley