Question

I’m writing a scheduling application that uses JQuery UI extensively. One of the requirements was a modal dialog with all the scheduling options (very similar to Windows 7 Task Scheduler).

What I want is something like this (but inside of a dialog):

http://jqueryui.com/demos/datepicker/#date-range

When we had that inside of a dialog, that always threw an exception, so we changed it to some custom behavior.

The problem is, is that when you select a date, the datepicker doesn’t close. Apparently it’s a bug (http://bugs.jqueryui.com/ticket/4453), and I was wondering if anyone had a fix for it.

Edit:
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');
        }
    }
});
}

Answer 1

Example of dialog with datepicker inside

Edit after code posted in question

The re-initializing of the datepicker again and again is causing it to error.

First initialized here:

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

then here

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

and here:

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);
}
});

See problem with jquery datepicker onselect to see how to set options and the onSelect event after initializing the datepicker.

It looks like all you may have to update is this:

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'
    });

Fiddle example: http://jsfiddle.net/az25g/