当我单击空文本框时，日期选择器会触发并且日历对话框会很好地显示。但是，如果再次单击文本框中的日期以更改为新日期，我将无法弹出相同的日期选择器对话框。
页面加载后的标记如下:
<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 值然后尝试单击日期选择器，也不会发生任何情况。这是我无法与日期选择器交互的示例:
10 月 15 日更新:(使用最新框架后没有变化)
以下屏幕片段显示了新资源的使用，但日期选择器对我来说与OP中的行为相同:
最佳答案
我更新了你的整个源代码... 现在看来它会起作用......
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<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>
<script>
$(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").datepicker({
numberOfMonths: 2,
onSelect: function (selected) {
$("#txtFromDate").datepicker("option", "maxDate", selected)
}
});
});
$(function () {
// check if checkbox is unchecked
if ($("#CheckBox1").is(':checked')){
$('#vacationModeBox').show();
$('#txtFromDate').focus();
}
else
$('#vacationModeBox').hide();
// check if any checkbox has changed state
$("input[type='checkbox']").on('change', function () {
if ($(this).not(":checked")) {
$('.dateTextBox').val("");
$('#vacationModeBox').toggle(this.checked);
}
if ($(this).is(":checked")){
$('#txtFromDate').focus();
}
});
});
</script>
关于javascript - 需要 jquery datepicker 再次触发以更改日期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40028360/