Databases
StackOverflow2013
Postsdbo
POBugfix for JQuery Datepicker Inside of Dialog
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBugfix for JQuery Datepicker Inside of Dialog
    text
    copied!<p>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).</p> <p>What I want is something like this (but inside of a dialog):</p> <p><a href="http://jqueryui.com/demos/datepicker/#date-range" rel="nofollow">http://jqueryui.com/demos/datepicker/#date-range</a></p> <p>When we had that inside of a dialog, that always threw an exception, so we changed it to some custom behavior.</p> <p>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.</p> <p>Edit: HTML/ASP.Net:</p> <pre><code>&lt;div id="dialog-sched" title="Schedule/Run A TestRun" style="display: none"&gt; &lt;label for="txtSelectedTest"&gt;Test/Group Name:&lt;/label&gt; &lt;asp:TextBox ID="txtSelectedTest" runat="server" ReadOnly="true" Style="margin-left: 10px; margin-top: 2px;" /&gt; &lt;br /&gt; &lt;label for="ddlRunOnPool"&gt;Pool:&lt;/label&gt; &lt;asp:DropDownList ID="ddlRunOnPool" runat="server" Width="150px" Style="margin-left: 90px; margin-top: 2px;" /&gt; &lt;br /&gt; &lt;label for="ddlRunOnAgent"&gt;Agent:&lt;/label&gt; &lt;asp:DropDownList ID="ddlRunOnAgent" runat="server" Width="150px" Style="margin-left: 80px; margin-top: 2px;" /&gt; &lt;br /&gt; &lt;div style="float: left"&gt; &lt;label for="RunStyle"&gt;Run Style:&lt;/label&gt; &lt;asp:RadioButtonList ID="RunStyle" runat="server" EnableViewState="false"&gt; &lt;asp:ListItem Value="Now" Text="Now" Selected="true" /&gt; &lt;asp:ListItem Value="Once" Text="Once" /&gt; &lt;asp:ListItem Value="Daily" Text="Daily" /&gt; &lt;asp:ListItem Value="Weekly" Text="Weekly" /&gt; &lt;/asp:RadioButtonList&gt; &lt;/div&gt; &lt;!--Start time: shows up for Once, Daily, and Weekly--&gt; &lt;div id="sched_Start" class="DialogInputPane"&gt; &lt;label for="start_date"&gt;Start Date:&amp;nbsp;&lt;/label&gt; &lt;input type="text" id="start_date" readonly="readonly" runat="server" /&gt; &lt;label for="start_hr"&gt;Run Time:&lt;/label&gt; &lt;input type="text" id="start_hr" maxlength="2" size="2" runat="server" /&gt; &lt;label for="start_min"&gt;:&lt;/label&gt; &lt;input type="text" id="start_min" maxlength="2" size="2" runat="server" /&gt; &lt;asp:DropDownList ID="start_AMPM" runat="server"&gt; &lt;asp:ListItem Value="AM"&gt;AM&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="PM"&gt;PM&lt;/asp:ListItem&gt; &lt;/asp:DropDownList&gt; &lt;/div&gt; &lt;!--recurrence: Daily and Weekly - Includes recur every and expire date --&gt; &lt;div id="sched_Recurrence" class="DialogInputPane"&gt; &lt;!--Expire Date--&gt; &lt;label for="sched_expire_forever"&gt;Expires:&lt;/label&gt; &lt;asp:CheckBox ID="sched_expire_forever" Checked="true" EnableViewState="false" runat="server" /&gt; &lt;input type="text" id="expire_date" readonly="readonly" runat="server" /&gt; &lt;!--recurrence--&gt; &lt;label for="sched_FrequencyTB"&gt;Every &lt;/label&gt; &lt;input type="text" id="sched_FrequencyTB" value="1" style="width: 2em" runat="server" /&gt; Days/Weeks &lt;/div&gt; &lt;!--Days of the week: only for weekly--&gt; &lt;div id="sched_weekdays" class="DialogInputPane"&gt; &lt;asp:CheckBox ID="chkSunday" Text="Sun" runat="server" EnableViewState="false" /&gt; &lt;asp:CheckBox ID="chkMonday" Text="Mon" runat="server" EnableViewState="false" /&gt; &lt;asp:CheckBox ID="chkTuesday" Text="Tues" runat="server" EnableViewState="false" /&gt; &lt;asp:CheckBox ID="chkWednesday" Text="Wed" runat="server" EnableViewState="false" /&gt; &lt;asp:CheckBox ID="chkThursday" Text="Thurs" runat="server" EnableViewState="false" /&gt; &lt;asp:CheckBox ID="chkFriday" Text="Fri" runat="server" EnableViewState="false" /&gt; &lt;asp:CheckBox ID="chkSaturday" Text="Sat" runat="server" EnableViewState="false" /&gt; &lt;/div&gt; &lt;ul id="sched_errors" style="clear: both; line-height: 1.5em;"&gt;&lt;/ul&gt; &lt;/div&gt; </code></pre> <p>Javascript:</p> <pre><code>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 &gt;= $(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() &lt; 11 ? "AM" : "PM"); // Open the Correct Panes initializeDialogPanes(); }, buttons: { 'Schedule': function () { // Scheduling Stuff ... // End Scheduling Stuff }, 'Cancel': function () { $(this).dialog('close'); } } }); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload