Javascript 对话框内部JQuery日期选择器的错误修复

我正在编写一个广泛使用jqueryui的调度应用程序。其中一个要求是一个带有所有调度选项的模式对话框（非常类似于Windows7任务调度器）

我想要的是这样的东西（但在对话框中）：

当我们在一个对话框中看到它时，它总是抛出一个异常，所以我们将其更改为一些自定义行为

问题是，当您选择日期时，日期选择器不会关闭。显然这是一只虫子(http://bugs.jqueryui.com/ticket/4453)，我想知道是否有人对此进行了修复

编辑： HTML/ASP.Net：

<div id="dialog-sched" title="Schedule/Run A TestRun" style="display: none">
    <label for="txtSelectedTest">Test/Group Name:</label>
    <asp:TextBox ID="txtSelectedTest" runat="server" ReadOnly="true" Style="margin-left: 10px;
        margin-top: 2px;" />
    <br />
    <label for="ddlRunOnPool">Pool:</label>
    <asp:DropDownList ID="ddlRunOnPool" runat="server" Width="150px" Style="margin-left: 90px;
        margin-top: 2px;" />
    <br />
    <label for="ddlRunOnAgent">Agent:</label>
    <asp:DropDownList ID="ddlRunOnAgent" runat="server" Width="150px" Style="margin-left: 80px;
        margin-top: 2px;" />
    <br />
    <div style="float: left">
        <label for="RunStyle">Run Style:</label>
        <asp:RadioButtonList ID="RunStyle" runat="server" EnableViewState="false">
            <asp:ListItem Value="Now" Text="Now" Selected="true" />
            <asp:ListItem Value="Once" Text="Once" />
            <asp:ListItem Value="Daily" Text="Daily" />
            <asp:ListItem Value="Weekly" Text="Weekly" />
        </asp:RadioButtonList>
    </div>
    <!--Start time: shows up for Once, Daily, and Weekly-->
    <div id="sched_Start" class="DialogInputPane">
        <label for="start_date">Start Date:&nbsp;</label>
        <input type="text" id="start_date" readonly="readonly" runat="server" />
        <label for="start_hr">Run Time:</label>
        <input type="text" id="start_hr" maxlength="2" size="2" runat="server" />
        <label for="start_min">:</label>
        <input type="text" id="start_min" maxlength="2" size="2" runat="server" />
        <asp:DropDownList ID="start_AMPM" runat="server">
            <asp:ListItem Value="AM">AM</asp:ListItem>
            <asp:ListItem Value="PM">PM</asp:ListItem>
        </asp:DropDownList>
    </div>
    <!--recurrence: Daily and Weekly - Includes recur every and expire date -->
    <div id="sched_Recurrence" class="DialogInputPane">
        <!--Expire Date-->
        <label for="sched_expire_forever">Expires:</label>
        <asp:CheckBox ID="sched_expire_forever" Checked="true" EnableViewState="false" runat="server" />
        <input type="text" id="expire_date" readonly="readonly" runat="server" />
        <!--recurrence-->
        <label for="sched_FrequencyTB">Every </label>
        <input type="text" id="sched_FrequencyTB" value="1" style="width: 2em" runat="server" />
        Days/Weeks
    </div>
    <!--Days of the week: only for weekly-->
    <div id="sched_weekdays" class="DialogInputPane">
        <asp:CheckBox ID="chkSunday" Text="Sun" runat="server" EnableViewState="false" />
        <asp:CheckBox ID="chkMonday" Text="Mon" runat="server" EnableViewState="false" />
        <asp:CheckBox ID="chkTuesday" Text="Tues" runat="server" EnableViewState="false" />
        <asp:CheckBox ID="chkWednesday" Text="Wed" runat="server" EnableViewState="false" />
        <asp:CheckBox ID="chkThursday" Text="Thurs" runat="server" EnableViewState="false" />
        <asp:CheckBox ID="chkFriday" Text="Fri" runat="server" EnableViewState="false" />
        <asp:CheckBox ID="chkSaturday" Text="Sat" runat="server" EnableViewState="false" />
    </div>
    <ul id="sched_errors" style="clear: both; line-height: 1.5em;"></ul>
</div>

测试/组名称：


游泳池：


代理人：


跑步风格：
开始日期：
运行时间：
:
是
颗粒物
到期：
每一个
天/周

Javascript:

function openScheduleDialog() {
var $start_hr = $("#start_hr"),
    $start_min = $("#start_min"), 
    $start_AMPM = $("#start_AMPM"),
    RunNow = $("#RunStyle_0"),
    RunOnce = $("#RunStyle_1"), 
    RunDaily = $("#RunStyle_2"),
    RunWeekly = $("#RunStyle_3"),
    datepickerOptions = { changeMonth: true, numberOfMonths: 1, minDate: "+0"},
    $expire_date = $("#expire_date").datepicker(datepickerOptions),
    $start_date = $("#start_date").datepicker(datepickerOptions);

function initializeDialogPanes() {
    $start_date.datepicker("setDate", "+0");
    if (RunNow.is(":checked")) {
        $("#sched_Start, #sched_weekdays, #sched_Recurrence").hide();
    } else if (RunOnce.is(":checked")) {
        $("#sched_Start").show();
        $("#sched_Recurrence, #sched_weekdays").hide();
    } else if (RunDaily.is(":checked")) {
        $("#sched_Start, #sched_Recurrence").show();
        $("#sched_weekdays").hide();
        $expire_date.datepicker("setDate", "+0");
    } else if (RunWeekly.is(":checked")) {
        $expire_date.datepicker("setDate", "+7");
        $("#sched_Start, #sched_weekdays, #sched_Recurrence").show();
    }
}

// Make it so the User Can Only Select a Pool or an Agent, not both.
mutuallyExclusiveDropdowns("#ddlRunOnPool", "#ddlRunOnAgent");

// Make it so that the user cannot set the expire date before the start date,
// and if they set the start date after the expire date, the expire date changes
// to the same value as the new start date
var $dates = $("#start_date, #expire_date").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    onSelect: function (selectedDate) {
        var option = this.id == "start_date" ? "minDate" : "maxDate";
        $dates.not(this).datepicker("option", option, selectedDate);
    }
});

// When the user checks the "Expires" Checkbox, the end_date textbox
// should be enabled. If it is unchecked, the textbox should be disabled.
// Also, this checkbox is by default checked.
$("#sched_expire_forever").click(function () {
    if ($(this).is(":checked")) {
        $expire_date.removeAttr('disabled');
    } else {
        $expire_date.attr("disabled", "disabled");
    }
}).attr("checked", "checked");

// Constrains the scheduled time input to be a positive integer
$start_hr.format({ precision: 0, allow_negative: false });
$start_min.format({ precision: 0, allow_negative: false });

// When the user presses a key in the start_hr textbox, this
// checks to see if the textbox has reached it's maxlength (2)
// and focuses on the next textbox if it does.
$start_hr.keyup(function () {
    if ($(this).val().length >= $(this).attr("maxlength")) {
        $start_min.focus();
    }
});

// When the user clicks different RunStyle Radiobuttons, certains
// parts of the ui should become visible/be hidden.
$("#RunStyle").click(function () { initializeDialogPanes(); });

$('#dialog-sched').dialog({
    autoOpen: true,
    closeText: "",
    resizable: true,
    height: 'auto',
    maxHeight: 480,
    width: 540,
    maxWidth: 640,
    modal: true,
    open: function () {
        var now = new Date(),
            mins = now.getMinutes().toString();

        // This puts the Dialog inside the form so controls get their
        // values posted back.
        $(this).parent().appendTo("form");

        // Set the time to right now
        if (mins.length === 1) {
            mins = "0" + mins;
        }
        $start_min.val(mins);
        $start_hr.val(now.getHours() % 12 + 1);
        $start_AMPM.val(now.getHours() < 11 ? "AM" : "PM");

        // Open the Correct Panes
        initializeDialogPanes();
    },
    buttons: {
        'Schedule': function () {
            // Scheduling Stuff
            ...
            // End Scheduling Stuff
        },
        'Cancel': function () {
            $(this).dialog('close');
        }
    }
});
}

函数openScheduleDialog（）{ 变量$start_hr=$（“#start_hr”）， $start_min=$（“#start_min”）， $start_AMPM=$（“#start_AMPM”）， RunNow=$（“#RunStyle_0”）， RunOnce=$（“#RunStyle_1”）， RunDaily=$（“#RunStyle_2”）， RunWeekly=$（“#RunStyle_3”）， datepickerOptions={changeMonth:true，numberOfMonths:1，minDate:“+0”}， $expire_date=$（“#expire_date”）.datepicker（datepickerOptions）， $start_date=$（“#start_date”）.datepicker（datepickerOptions）； 函数初始化DialogPanes（）{ $start_date.datepicker（“setDate”、“+0”）； if（RunNow.is（“：checked”））{ $（“#sched#u Start，#sched#u weekdays，#sched#u Recurrence”）.hide（）； }else if（RunOnce.is（“：checked”））{ $（“sched#u Start”）.show（）； $（“#sched#u Recurrence，#sched#u weekdays”）.hide（）； }else if（RunDaily.is（“：checked”））{ $（“#sched#u Start，#sched#u Recurrence”）.show（）； $（“#计划工作日”）.hide（）； $expire_date.datepicker（“setDate”和“+0”）； }else if（RunWeekly.is（“：checked”））{ $expire_date.datepicker（“setDate”和“+7”）； $（“#sched#u Start，#sched#u weekdays，#sched#u Recurrence”）.show（）； } } //设置为用户只能选择池或代理，而不能同时选择两者。 互斥下拉列表（“ddlRunOnPool”、“ddlRunOnAgent”）； //设置为用户不能在开始日期之前设置过期日期， //如果他们将开始日期设置为过期日期之后，则过期日期会更改 //设置为与新开始日期相同的值 var$dates=$（“#开始日期，#到期日期”）。日期选择器({ 默认日期：“+1w”， 变化月：对， 月数：3， onSelect：函数（selectedDate）{ var option=this.id==“开始日期”？“minDate”：“maxDate”； $dates.not（this）.datepicker（“option”，option，selectedDate）； } }); //当用户选中“过期”复选框时，结束日期文本框 //应启用。如果未选中，则应禁用文本框。 //此外，默认情况下，此复选框处于选中状态。 $（“#计划将永远过期”）。单击（函数（）{ 如果（$（this）.is（“：checked”））{ $expire_date.removeAttr（'disabled'）； }否则{ $expire_date.attr（“禁用”、“禁用”）； } }).attr（“已检查”、“已检查”）； //将计划时间输入约束为正整数 $start_hr.format（{precision:0，allow_negative:false}）； $start_min.format（{precision:0，allow_negative:false}）； //当用户按下“开始”文本框中的键时，此 //检查文本框是否已达到其最大长度（2） //并关注下一个文本框（如果有）。 $start\u hr.keyup（功能（）{ if（$（this.val（）.length>=$（this.attr（“maxlength”））{ $start_min.focus（）； } }); //当用户单击不同的RunStyle单选按钮时 //ui的某些部分应该可见/隐藏。 $（“#运行方式”）。单击（函数（）{initializeDialogPanes（）；}）； $（'dialog sched'）。对话框({ 自动打开：对， closeText:“”， 可调整大小：正确， 高度：“自动”， 最大高度：480， 宽度：540， 最大宽度：640， 莫代尔：是的， 打开：函数（）{ var now=新日期（）， mins=now.getMinutes（）.toString（）； //这会将对话框放在窗体内，以便控件获得 //返回的值。 $（this.parent（）.appendTo（“form”）； //把时间定在现在 如果（分钟长度===1）{ 分钟=“0”+分钟； } $start_min.val（分钟）； $start_hr.val（now.getHours（）%12+1）； $start_AMPM.val（now.getHours（）<11？“AM”：“PM”）； //打开正确的窗格 初始化DialogPanes（）； }, 按钮：{ “计划”：函数（）{ //调度人员 ... //结束日程安排 }, “取消”：函数（）{ $（this.dialog（'close'）； } } }); }

---

该错误已根据解决方案修复。好像是别的。将脚本文件更新到最新版本。

在问题代码发布后编辑

一次又一次地重新初始化日期选择器导致它出错

首先在此处初始化：

$expire_date = $("#expire_date").datepicker(datepickerOptions),

那么这里

$expire_date.datepicker("setDate", "+7");

在这里：

var $dates = $("#start_date, #expire_date").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onSelect: function (selectedDate) {
    var option = this.id == "start_date" ? "minDate" : "maxDate";
    $dates.not(this).datepicker("option", option, selectedDate);
}
});

请参阅，了解如何在初始化日期选择器后设置选项和onSelect事件

看起来您可能需要更新的内容如下：

var $dates = $("#start_date, #expire_date").datepicker('option', {
    onSelect: function(selectedDate) {
        var option = this.id == "start_date" ? "minDate" : "maxDate";
        $dates.not(this).datepicker("option", option, selectedDate);
    }
    }, {
        defaultDate: '+1w'
    }, {
        changeMonth: true
    }, {
        numberOfMonths: '3'
    });

---

小提琴示例：

我意识到这是一个旧线程，但我遇到了同样的问题。下面是一个JSFIDLE演示：

一些文本：
日期：
$（“#datepicker”）.datepicker（{onSelect:function（dateText，inst）{
$（“#日期选择器”）。日期选择器（“隐藏”）；
//$（“#日期选择器”）.blur（）；//这没有
<div id="dialog">
    <fieldset>
        Some text: <input type="text" id="defaultField" size="30">
        Date: <input type="text" id="datepicker" size="30">
    </fieldset>
</div>

$("#datepicker" ).datepicker({onSelect: function(dateText, inst){
    $("#datepicker").datepicker("hide");
    //$("#datepicker").blur(); //this has no effect
    //$("#defaultField").focus(); //uncomment this line to make datepicker close
}});

$("#dialog").dialog(
        {
            resizable: false,
            height: 300,
            width: 400,
            modal: true,
            buttons: {
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });