DatePicker清除功能

发布于 2024-12-01 13:32:04 字数 1937 浏览 0 评论 0原文

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

示例 (DatePicker)

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 中的日期

我已经在这个问题上搜索了很多,但找不到这个问题的正确解决方案。任何帮助将不胜感激。

谢谢

I have a field with a date picker (jQuery) in jsp page.

sample (DatePicker)

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

Page also has a "clear" button functionality, which clears all text fields on a page and the text inserted in those fields including the date chosen from the datepicker.

clear button code

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

javascript clearData() Code (for Date Field)

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

Date field Code

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

jQuery DatePicker Code

 <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>

My code has a major shortcoming. If I select 1st of august, 2011 from the date picker and click on "clear" button. The date field gets cleared but I can't choose the same date again (i.e 1st of august, 2011).

Clear button only clears the value inside the field, but It does not clear the date in the underlying DatePicker

I have googled a lot on this issue, but couldn't find a proper solution on this issue. Any help would really be appreciated.

Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

耳根太软 2024-12-08 13:32:04

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

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

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

I think you need to add the following in your clearData() function:

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

This unsets the selected value in the date picker. By simply clearing the text field value as you're doing now, the date picker isn't being updated and so it gets out of sync with the text field value.

友欢 2024-12-08 13:32:04

这个对我来说很有效:
$('.dateInput').datePicker().dpSetSelected(null,true,false);

This one did the trick for me:
$('.dateInput').datePicker().dpSetSelected(null,true,false);

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文