需要 jquery 日期选择器再次触发以更改日期

Question

当我单击一个空的文本框时，日期选择器会触发并且日历对话框会很好地显示。但是，如果再次单击文本框中的日期以更改为新日期，我将无法弹出相同的日期选择器对话框。

页面加载后的标记如下：

<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 像原始 post 中描述的那样为我工作？ :

<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 "pops up" 会很好地显示日历以供选择；然而，当我点击一个已经有日期的文本框并打算选择一个新日期时，没有任何反应。即使我清除 mm/dd/yyyy 值然后尝试单击日期选择器，也没有任何反应。这是我无法与日期选择器交互的示例：

10 月 15 日更新：（使用最新框架后无变化）以下屏幕片段显示了对较新资源的使用，但 datepicker 对我来说与 OP 中的行为相同：

Answer 1

我更新了你的整个源代码... 现在看来它会起作用...

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

需要 jquery 日期选择器再次触发以更改日期

need jquery datepicker to fire again for changing a date

javascript

jquery

asp.net

jquery-ui

jquery-ui-datepicker