DatePicker清除功能
我在 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我认为您需要在
clearData()
函数中添加以下内容:这将取消设置日期选择器中的选定值。通过像现在一样简单地清除文本字段值,日期选择器不会更新,因此它与文本字段值不同步。
I think you need to add the following in your
clearData()
function: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.
这个对我来说很有效:
$('.dateInput').datePicker().dpSetSelected(null,true,false);
This one did the trick for me:
$('.dateInput').datePicker().dpSetSelected(null,true,false);