【发布时间】：2017-02-23 00:17:24
【问题描述】：
当我单击一个空的文本框时，日期选择器会触发并且日历对话框会很好地显示。但是，如果再次单击文本框中的日期以更改为新日期，则无法弹出相同的日期选择器对话框。
页面加载后的标记如下：
<div id="panelVacationMode" class="row">
<span class="labelCell" title="Skip reminder emails until I return">
<input id="CheckBox1" type="checkbox" name="ctl00$MainContentPlaceHolder$CheckBox1"
checked="checked"><label for="CheckBox1">Vacation Mode</label></span>
<div id="vacationModeBox" class="vacationRangeCell">
<label for="txtFromDate" id="lblStart">Start:</label>
<input name="ctl00$MainContentPlaceHolder$txtFromDate" type="text"
value="11/1/2016" maxlength="10"
id="txtFromDate" class="dateTextBox" size="8">
<label for="txtToDate" id="lblReturn">Return:</label>
<input name="ctl00$MainContentPlaceHolder$txtToDate" type="text"
value="12/31/2016" maxlength="10"
id="txtToDate" class="dateTextBox" size="8">
<br>
</div>
<br>
<br>
</div>
这是.aspx页面底部的代码：
<script>
$(function () {
// check if checkbox is unchecked
if ($("#CheckBox1").is(':checked'))
$('#vacationModeBox').show();
else
$('#vacationModeBox').hide();
// check if any checkbox has changed state
$("input[type='checkbox']").click(function () {
$('#txtFromDate').focus();
$("input[type='checkbox']").on('change', function () {
if ($(this).not(":checked")) {
$('.dateTextBox').val("");
$('#vacationModeBox').toggle(this.checked);
}
else
$('#txtFromDate').focus();
});
$(function () {
var date = new Date();
var currentMonth = date.getMonth();
var currentDate = date.getDate();
var currentYear = date.getFullYear();
$("#txtFromDate").datepicker({
numberOfMonths: 2,
minDate: new Date(currentYear, currentMonth, currentDate),
onSelect: function (selected) {
$("#txtToDate").datepicker("option", "minDate", selected)
}
});
$('#txtToDate').focus();
$("#txtToDate").datepicker({
numberOfMonths: 2,
onSelect: function (selected) {
$("#txtFromDate").datepicker("option", "maxDate", selected)
}
});
});
});
});
</script>
2016 年 10 月 14 日添加更新：
也许我需要对下面的这些参考进行一些更改，以使 datepicker 为我工作，如原始帖子中所述？ ：
<html>
<head runat="server">
<title></title>
<link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.css" />
<link type="text/css" rel="stylesheet" href="~/IEStyles.css" />
<link type="text/css" rel="stylesheet" href="~/StyleSheet1.css" />
<link type="text/css" rel="stylesheet" href="~/css/app.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.js"></script>
<script type="text/javascript" src="<%= ResolveClientUrl("~/js/sitewide.js") %>"></script>
<asp:ContentPlaceHolder ID="ExtraStyles" runat="server" />
</head>
力求明确：当我单击尚未存储日期的文本框时，日期选择器 UI 会很好地“弹出”并显示日历以供选择；然而，当我点击一个已经有日期的文本框并打算选择一个新日期时，什么也没有发生。即使我清除 mm/dd/yyyy 值然后尝试单击日期选择器，也没有任何反应。这是我无法与 datepicker 交互的示例：
10 月 15 日更新：（使用最新框架后没有变化） 以下屏幕 sn-p 显示了对较新资源的使用，但 datepicker 对我来说与 OP 中的行为相同：
【问题讨论】：
-
没关系，但您不需要嵌套
$(function () {块。一个包含集合就足够了。
标签： javascript jquery asp.net jquery-ui jquery-ui-datepicker