jquery - DatePicker清除功能

Question

我在 jsp 页面中有一个带有日期选择器(jQuery)的字段。

示例(日期选择器)

http://jqueryui.com/demos/datepicker/#icon-trigger

页面还具有“清除”按钮功能，可清除页面上的所有文本字段以及这些字段中插入的文本，包括从日期选择器中选择的日期。

清除按钮代码

<input type="button" name="buttonclear" id="buttonclear" class="buttonstyle_mid" value="Clear"
  onclick="javascript:clearData();" />

javascript clearData() 代码(用于日期字段)

document.getElementById("DateId").value = "";

日期字段代码

<form:input id="DateId" path="date" class="dateInput" size="11" maxlength="10" readonly="true" />

jQuery DatePicker 代码

 <script type="text/javascript">
        jQuery(function($) {
            $('.dateInput').datePicker();
            });
            $('#DateId').datePicker({
                startDate : '01/01/1970',
                endDate : (new Date()).asString()
            });     
    $('#DateId').bind('dpClosed', function(e, selectedDates) {
                var d = selectedDates[0];
                if (d) {
                    d = new Date(d);
                    $('#DateId1').dpSetStartDate(d.addDays(1).asString());
                }
            });
            $('#DateId1').bind('dpClosed', function(e, selectedDates) {
                var d = selectedDates[0];
                if (d) {
                    d = new Date(d);
                    $('#DateId').dpSetEndDate(d.addDays(-1).asString());
                }
            });
 </script>

我的代码有一个重大缺点。如果我从日期选择器中选择2011 年 8 月 1 日，然后单击“清除”按钮。日期字段被清除，但我无法再次选择相同的日期(即2011 年 8 月 1 日)。

清除按钮仅清除字段内的值，但不会清除底层 DatePicker 中的日期

我在谷歌上搜索了很多关于这个问题的信息，但找不到关于这个问题的正确解决方案。任何帮助将不胜感激。

谢谢

Answer 1

我认为您需要在 clearData() 函数中添加以下内容:

$('.dateInput').datepicker( "setDate" , null );

这将取消设置日期选择器中的选定值。通过像现在一样简单地清除文本字段值，日期选择器不会更新，因此它与文本字段值不同步。