Bugfix for JQuery Datepicker Inside of Dialog

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

score 1 · Answer 1 · answered Apr 23 '15 at 10:26

I realize this is an old thread, but I got the same problem. Here is a JSFiddle that demonstrates it: Fiddle

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

The only workaround I found, was to explicitly set focus to another input inside the Select event of the datepicker.

score 0 · Answer 2 · answered Sep 01 '11 at 03:39

0

that bug was fixed according to the http://bugs.jqueryui.com/ticket/4453 . Seems like something else. Update your script files to latest version.

answered Sep 01 '11 at 03:39

Jayantha Lal Sirisena

21,216
11
71
92

I have a custom 1.8.15 JQuery-UI Generated from ThemeRoller and JQuery 1.6.2. I just tested my page in Firefox 3.6.3 and Chrome 13 and it works fine, but not in IE 8. I also reverted back to the same code at http://jqueryui.com/demos/datepicker/#date-range, and that works fine in FF and Chrome. but not in IE 8. – Manual5355 Sep 01 '11 at 12:55
Does Anyone Have an Example Site or Code with a datepicker inside of a dialog that works? – Manual5355 Sep 02 '11 at 12:31

score 0 · Accepted Answer · edited May 23 '17 at 12:16

0

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/

edited May 23 '17 at 12:16

Community

1
1

answered Sep 03 '11 at 00:43

jk.

14,365
4
43
58

The problem isn't that the datepicker stays open when the dialog closes. It's when I select a date from the datepicker, the datepicker stays open, and in order to access the other elements of the form, the datepicker has to go away. I tried throwing .datepicker('hide') in my datepicker onClose event, which didn't work. Also tried blurring the input field, because the only way you can get it to hide when using the ui is to click somewhere else. – Manual5355 Sep 06 '11 at 13:08
@Joseph Shanak Did you look at the example link at the top of my answer? It has a date range picker using a dialog and a datepicker. Not sure why yours doesn't close. If you post some code, that my help solve this. – jk. Sep 06 '11 at 13:31
I looked at the example. It's not exactly what I required. If you go to http://jqueryui.com/demos/datepicker/#date-range this date picker constrains the range, that is, when you select a end date, it sets the max date on the start date to be the end date and vice verse. I'll post code in a moment. – Manual5355 Sep 06 '11 at 14:02

Bugfix for JQuery Datepicker Inside of Dialog

3 Answers3