Bug 1201266: Migrate YUI calendar to jQuery

docs/en/rst/administering/custom-fields.rst

@@ -68,8 +68,7 @@ The following attributes must be set for each new custom field:
       :ref:`edit-values-list` for information about
       editing legal values.
   Date/Time:
-      A date field. This field appears with a
-      calendar widget for choosing the date.
+      A date field.
 
 - *Sortkey:*
   Integer that determines in which order Custom Fields are

js/field.js

@@ -87,129 +87,6 @@ function _errorFor(field, name) {
     YAHOO.util.Dom.addClass(field, 'validation_error_field');
 }
 
-/* This function is never to be called directly, but only indirectly
- * using template/en/default/global/calendar.js.tmpl, so that localization
- * works. For the same reason, if you modify this function's parameter list,
- * you need to modify the documentation in said template as well. */
-function createCalendar(name, start_weekday, months_long, weekdays_short) {
-    var cal = new YAHOO.widget.Calendar('calendar_' + name, 
-                                        'con_calendar_' + name,
-                                        { START_WEEKDAY:  start_weekday,
-                                          MONTHS_LONG:    months_long,
-                                          WEEKDAYS_SHORT: weekdays_short
-                                        });
-    YAHOO.bugzilla['calendar_' + name] = cal;
-    var field = document.getElementById(name);
-    cal.selectEvent.subscribe(setFieldFromCalendar, field, false);
-    updateCalendarFromField(field);
-    cal.render();
-}
-
-/* The onclick handlers for the button that shows the calendar. */
-function showCalendar(field_name) {
-    var calendar  = YAHOO.bugzilla["calendar_" + field_name];
-    var field     = document.getElementById(field_name);
-    var button    = document.getElementById('button_calendar_' + field_name);
-
-    bz_overlayBelow(calendar.oDomContainer, field);
-    calendar.show();
-    button.onclick = function() { hideCalendar(field_name); };
-
-    // Because of the way removeListener works, this has to be a function
-    // attached directly to this calendar.
-    calendar.bz_myBodyCloser = function(event) {
-        var container = this.oDomContainer;
-        var target    = YAHOO.util.Event.getTarget(event);
-        if (target != container && target != button
-            && !YAHOO.util.Dom.isAncestor(container, target))
-        {
-            hideCalendar(field_name);
-        }
-    };
-
-    // If somebody clicks outside the calendar, hide it.
-    YAHOO.util.Event.addListener(document.body, 'click', 
-                                 calendar.bz_myBodyCloser, calendar, true);
-
-    // Make Esc close the calendar.
-    calendar.bz_escCal = function (event) {
-        var key = YAHOO.util.Event.getCharCode(event);
-        if (key == 27) {
-            hideCalendar(field_name);
-        }
-    };
-    YAHOO.util.Event.addListener(document.body, 'keydown', calendar.bz_escCal);
-}
-
-function hideCalendar(field_name) {
-    var cal = YAHOO.bugzilla["calendar_" + field_name];
-    cal.hide();
-    var button = document.getElementById('button_calendar_' + field_name);
-    button.onclick = function() { showCalendar(field_name); };
-    YAHOO.util.Event.removeListener(document.body, 'click',
-                                    cal.bz_myBodyCloser);
-    YAHOO.util.Event.removeListener(document.body, 'keydown', cal.bz_escCal);
-}
-
-/* This is the selectEvent for our Calendar objects on our custom 
- * DateTime fields.
- */
-function setFieldFromCalendar(type, args, date_field) {
-    var dates = args[0];
-    var setDate = dates[0];
-
-    // We can't just write the date straight into the field, because there 
-    // might already be a time there.
-    var timeRe = /\b(\d{1,2}):(\d\d)(?::(\d\d))?/;
-    var currentTime = timeRe.exec(date_field.value);
-    var d = new Date(setDate[0], setDate[1] - 1, setDate[2]);
-    if (currentTime) {
-        d.setHours(currentTime[1], currentTime[2]);
-        if (currentTime[3]) {
-            d.setSeconds(currentTime[3]);
-        }
-    }
-
-    var year = d.getFullYear();
-    // JavaScript's "Date" represents January as 0 and December as 11.
-    var month = d.getMonth() + 1;
-    if (month < 10) month = '0' + String(month);
-    var day = d.getDate();
-    if (day < 10) day = '0' + String(day);
-    var dateStr = year + '-' + month  + '-' + day;
-
-    if (currentTime) {
-        var minutes = d.getMinutes();
-        if (minutes < 10) minutes = '0' + String(minutes);
-        var seconds = d.getSeconds();
-        if (seconds > 0 && seconds < 10) {
-            seconds = '0' + String(seconds);
-        }
-
-        dateStr = dateStr + ' ' + d.getHours() + ':' + minutes;
-        if (seconds) dateStr = dateStr + ':' + seconds;
-    }
-
-    date_field.value = dateStr;
-    hideCalendar(date_field.id);
-}
-
-/* Sets the calendar based on the current field value. 
- */ 
-function updateCalendarFromField(date_field) {
-    var dateRe = /(\d\d\d\d)-(\d\d?)-(\d\d?)/;
-    var pieces = dateRe.exec(date_field.value);
-    if (pieces) {
-        var cal = YAHOO.bugzilla["calendar_" + date_field.id];
-        cal.select(new Date(pieces[1], pieces[2] - 1, pieces[3]));
-        var selectedArray = cal.getSelectedDates();
-        var selected = selectedArray[0];
-        cal.cfg.setProperty("pagedate", (selected.getMonth() + 1) + '/' 
-                                        + selected.getFullYear());
-        cal.render();
-    }
-}
-
 function setupEditLink(id) {
     var link_container = 'container_showhide_' + id;
     var input_container = 'container_' + id;

skins/standard/global.css

@@ -684,13 +684,6 @@ input.required, select.required, span.required_explanation {
     color: #000;
 }
 
-.calendar_button {
-    background: transparent url("global/calendar.png") no-repeat;
-    width: 20px;
-    height: 20px;
-    vertical-align: middle;
-}
-.calendar_button span { display: none }
 /* These classes are set by YUI. */
 .yui-calcontainer {
     display: none;

template/en/default/bug/create/create.html.tmpl

@@ -12,7 +12,7 @@
 [% PROCESS global/header.html.tmpl
   title = title
   generate_api_token = 1
-  yui = [ 'calendar', 'datatable', 'button' ]
+  yui = ['datatable', 'button']
   style_urls = ['skins/standard/bug.css']
   javascript_urls = [ "js/attachment.js", "js/util.js",
                       "js/field.js", "js/TUI.js", "js/bug.js" ]

template/en/default/bug/field.html.tmpl

@@ -52,24 +52,15 @@
     [% CASE [constants.FIELD_TYPE_DATETIME, constants.FIELD_TYPE_DATE] %]
       [% size = (field.type == constants.FIELD_TYPE_DATE) ? 10 : 20 %]
       <input name="[% field.name FILTER html %]" size="[% size FILTER none %]"
-             id="[% field.name FILTER html %]"
-             value="[% value FILTER html %]"
+             id="[% field.name FILTER html %]" value="[% value FILTER html %]"
              [% IF field.is_mandatory %]
                data-required="true" [% 'aria-required="true" required' UNLESS field_hidden %]
-             [% END %]
-             onchange="updateCalendarFromField(this)">
-      <button type="button" class="calendar_button"
-              id="button_calendar_[% field.name FILTER html %]"
-              onclick="showCalendar('[% field.name FILTER js %]')">
-        <span>Calendar</span>
-      </button>
-
-      <div id="con_calendar_[% field.name FILTER html %]"></div>
-
+             [% END %]>
       <script type="text/javascript">
-        <!--
-          [%+ PROCESS "global/calendar.js.tmpl" id = field.name %]
-        //--></script>
+        $(function() {
+          $("#[% field.name FILTER html FILTER js %]").datepicker([% "{constrainInput: false}" IF field.type == constants.FIELD_TYPE_DATETIME %]);
+        });
+      </script>
     [% CASE constants.FIELD_TYPE_BUG_ID %]
         <span id="[% field.name FILTER html %]_input_area">
           <input name="[% field.name FILTER html %]" id="[% field.name FILTER html %]"

template/en/default/bug/show-header.html.tmpl

@@ -24,7 +24,6 @@
 [% END %]
 [% title = title _ filtered_desc %]
 [% generate_api_token = 1 %]
-[% yui = [ 'calendar' ] %]
 [% yui.push('json', 'connection', 'container') IF user.can_tag_comments %]
 [% javascript_urls = [ "js/util.js", "js/field.js", "js/comments.js" ] %]
 [% javascript_urls.push("js/bug.js") IF user.id  %]

template/en/default/bug/summarize-time.html.tmpl

@@ -22,9 +22,7 @@
     header = header
     style_urls = ['skins/standard/buglist.css']
     doc_section = "using/editing.html#time-tracking"
-    yui = ['calendar']
-    javascript_urls = [ "js/util.js", "js/field.js" ]
-    %]
+%]
 
 [% INCLUDE query_form %]
 
@@ -261,23 +259,19 @@
       <label accesskey="s" for="start_date">Period <u>s</u>tarting</label>:
     </th>
     <td>
-      <input id="start_date" name="start_date" size="10" autofocus
-             value="[% start_date FILTER html %]" maxlength="10"
-             onchange="updateCalendarFromField(this)">
-      <button type="button" class="calendar_button" id="button_calendar_start_date"
-              onclick="showCalendar('start_date')"><span>Calendar</span>
-      </button>
-      <div id="con_calendar_start_date"></div>
+      <input id="start_date" name="start_date" size="10"
+             value="[% start_date FILTER html %]" maxlength="10">
       <span class="label">
         and <label accesskey="e" for="end_date"><u>e</u>nding</label>:
       </span>
-      <input type="text" name="end_date" size="10" id="end_date"
-             value ="[% end_date FILTER html %]" maxlength="10"
-             onchange="updateCalendarFromField(this)">
-      <button type="button" class="calendar_button" id="button_calendar_end_date"
-              onclick="showCalendar('end_date')"><span>Calendar</span>
-      </button>
-      <div id="con_calendar_end_date"></div>
+      <input id="end_date" name="end_date" size="10"
+             value ="[% end_date FILTER html %]" maxlength="10">
+      <script type="text/javascript">
+        $(function() {
+          $("#start_date").datepicker();
+          $("#end_date").datepicker();
+        });
+      </script>
       <br>
       <span class="bz_info">(Dates are optional, and in YYYY-MM-DD format)</span>
     </td>
@@ -321,11 +315,5 @@
 </table>
 
 </form>
-<script type="text/javascript">
-  <!--
-    [%+ PROCESS "global/calendar.js.tmpl" id = 'start_date' %]
-    [% PROCESS "global/calendar.js.tmpl" id = 'end_date' %]
-  //-->
-</script>
 <hr>
 [% END %]

template/en/default/global/calendar.js.tmpl

-[%# This Source Code Form is subject to the terms of the Mozilla Public
-  # License, v. 2.0. If a copy of the MPL was not distributed with this
-  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
-  #
-  # This Source Code Form is "Incompatible With Secondary Licenses", as
-  # defined by the Mozilla Public License, v. 2.0.
-  #%]
-
-[%# INTERFACE:
-  # id: The id of the input field the calendar widget is to be assigned to.
-  #%]
-
-[%# This template exists because createCalendar accepts additional parameters
-  # which allow for localization. Please see the YUI documentation at
-  # http://developer.yahoo.com/yui/calendar/#internationalization for details.
-  # As an example, here's what you'd specify as additional parameters to
-  # localize for German calendars; replace the ellipsis ("...") by the original
-  # parameter (we cannot put it into the example because it'd break this
-  # template comment):
-  #
-  #   createCalendar(...
-  #                  /* The weekday the week begins on; 0 is Sunday,
-  #                   * 1 is Monday and so on: */
-  #                  1,
-  #                  /* Months, full names; first must be January: */
-  #                  ['Januar',    'Februar',   'März',      'April',
-  #                   'Mai',       'Juni',      'Juli',      'August',
-  #                   'September', 'Oktober',   'November',  'Dezember'],
-  #                  /* Weekdays, two-letter abbreviations; first must be
-  #                   * Sunday: */
-  #                  ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']);
-  #%]
-createCalendar('[% id FILTER js %]');

template/en/default/global/header.html.tmpl

@@ -44,7 +44,6 @@
 
 [% IF NOT no_yui %]
   [% SET yui_css = {
-    calendar     => 1,
     datatable    => 1,
     button       => 1,
   } %]
@@ -182,6 +181,16 @@
         } 
         $(document).ready(unhide_language_selector);
 
+        // This sets the default parameters for all calendar fields.
+        $.datepicker.setDefaults({
+            dateFormat: "yy-mm-dd", // this is the YYYY-MM-DD format
+            showButtonPanel: true,  // permits to easily select "Today"
+            // These 3 parameters are useful for localization.
+            firstDay: 0,            // 0 = Sunday, 1 = Monday, etc...
+            dayNamesMin: [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ],
+            monthNames: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]
+        });
+
         [%# Make some Bugzilla information available to all scripts. 
           # We don't import every parameter and constant because we
           # don't want to add a lot of uncached JS to every page. 

template/en/default/list/list.html.tmpl

@@ -61,7 +61,6 @@
   title = title
   generate_api_token = dotweak
   atomlink = "buglist.cgi?$urlquerypart&title=$title&ctype=atom" 
-  yui = [ 'calendar' ]
   javascript_urls = [ "js/util.js", "js/field.js", "js/TUI.js" ]
   style_urls = [ "skins/standard/buglist.css" ]
   doc_section = "using/finding.html"

template/en/default/reports/create-chart.html.tmpl

@@ -215,12 +215,10 @@ function subcatSelected() {
         <td></td>
         <td>
           <label for="datefrom"><b>Date Range</b></label>:
-          <input type="text" size="12" name="datefrom" id="datefrom"
-            placeholder="YYYY-MM-DD"
-            value="[% time2str("%Y-%m-%d", chart.datefrom) IF chart.datefrom%]">
+          <input size="12" name="datefrom" id="datefrom" placeholder="YYYY-MM-DD"
+            value="[% time2str("%Y-%m-%d", chart.datefrom) IF chart.datefrom %]">
           <label for="dateto"><b>to</b></label>
-          <input type="text" size="12" name="dateto" id="dateto"
-            placeholder="YYYY-MM-DD"
+          <input size="12" name="dateto" id="dateto" placeholder="YYYY-MM-DD"
             value="[% time2str("%Y-%m-%d", chart.dateto) IF chart.dateto %]">
         </td>
 
@@ -230,6 +228,12 @@ function subcatSelected() {
         </td>
       </tr>
     </table>
+    <script type="text/javascript">
+      $(function() {
+        $("#datefrom").datepicker();
+        $("#dateto").datepicker();
+      });
+    </script>
   [% ELSE %]
   <p><i>None</i></p>
   [% END %]  

template/en/default/search/field.html.tmpl

@@ -57,32 +57,19 @@
     %]
     from <input name="[% field.name FILTER html %]from"
                 id="[% field.name FILTER html %]"
-                size="10" maxlength="10"
-                value="[% value.0 FILTER html %]" 
-                onchange="updateCalendarFromField(this);[% onchange FILTER html %]">
-         <button type="button" class="calendar_button"
-                        id="button_calendar_[% field.name FILTER html %]"
-                        onclick="showCalendar('[% field.name FILTER js %]')">
-           <span>Calendar</span>
-         </button>
-         <span id="con_calendar_[% field.name FILTER html %]"></span>               
+                size="10" maxlength="10" value="[% value.0 FILTER html %]">
     to <input name="[% field.name FILTER html %]to"
               id="[% field.name FILTER html %]to" size="10" maxlength="10"
-              value="[% value.1 FILTER html %]" 
-              onchange="updateCalendarFromField(this);[% onchange FILTER html %]">
-       <button type="button" class="calendar_button"
-                      id="button_calendar_[% field.name FILTER html %]to"
-                      onclick="showCalendar('[% field.name FILTER js %]to')">
-         <span>Calendar</span>
-       </button>
+              value="[% value.1 FILTER html %]">
     <small>(YYYY-MM-DD or relative dates)</small>
 
-    <span id="con_calendar_[% field.name FILTER html %]to"></span>
     <script type="text/javascript">
-      <!--
-        [%+ PROCESS "global/calendar.js.tmpl" id = field.name %]
-        [% PROCESS "global/calendar.js.tmpl" id = field.name _ 'to' %]
-      //--></script>
+      $(function() {
+        // do not check user input as relative dates are allowed
+        $("#[% field.name FILTER html FILTER js %]").datepicker({constrainInput: false});
+        $("#[% field.name FILTER html FILTER js %]to").datepicker({constrainInput: false});
+      });
+    </script>
   [% CASE [ constants.FIELD_TYPE_SINGLE_SELECT, 
             constants.FIELD_TYPE_MULTI_SELECT ] %]
     <div id="container_[% field.name FILTER html %]" class="search_field_grid">      

template/en/default/search/form.html.tmpl

@@ -307,25 +307,17 @@ TUI_hide_default('information_query');
   <li>
     <label for="chfieldfrom">between:</label>
     <input name="chfieldfrom" id="chfieldfrom" size="10" 
-           value="[% default.chfieldfrom.0 FILTER html %]" onchange="updateCalendarFromField(this)"> 
-           <button type="button" class="calendar_button"
-                          id="button_calendar_chfieldfrom"
-                          onclick="showCalendar('chfieldfrom')"><span>Calendar</span></button>
+           value="[% default.chfieldfrom.0 FILTER html %]">
     and
-           <div id="con_calendar_chfieldfrom"></div>
     <input name="chfieldto" size="10" id="chfieldto"
-                 value="[% default.chfieldto.0 || "Now" FILTER html %]" 
-                 onchange="updateCalendarFromField(this)">
-          <button type="button" class="calendar_button"
-                         id="button_calendar_chfieldto"
-                         onclick="showCalendar('chfieldto')"><span>Calendar</span></button>
-          <div id="con_calendar_chfieldto"></div>
+           value="[% default.chfieldto.0 || "Now" FILTER html %]">
     (YYYY-MM-DD or relative dates)
     <script type="text/javascript">
-      <!--
-        [%+ PROCESS "global/calendar.js.tmpl" id = 'chfieldfrom' %]
-        [% PROCESS "global/calendar.js.tmpl" id = 'chfieldto' %]
-      //--></script>
+      $(function() {
+        $("#chfieldfrom").datepicker();
+        $("#chfieldto").datepicker();
+      });
+    </script>
   </li>
 </ul>
 

template/en/default/search/search-advanced.html.tmpl

@@ -27,7 +27,6 @@ function remove_token() {
 [% PROCESS global/header.html.tmpl
   title = "Search for $terms.bugs"
   generate_api_token = 1
-  yui = [ 'calendar' ]
   javascript = javascript
   javascript_urls = [ "js/util.js", "js/TUI.js", "js/field.js"]
   style_urls = ['skins/standard/buglist.css']

template/en/default/search/search-create-series.html.tmpl

@@ -19,7 +19,6 @@
 [% PROCESS global/header.html.tmpl 
   title = "Create New Data Set"
   onload = "doOnSelectProduct(0);"
-  yui = [ 'calendar' ]
   javascript = js_data 
   javascript_urls = [ "js/util.js", "js/TUI.js", "js/field.js" ]
   style_urls = ['skins/standard/buglist.css']

template/en/default/search/search-report-graph.html.tmpl

@@ -18,7 +18,6 @@ var queryform = "reportform"
 [% PROCESS global/header.html.tmpl
   title = "Generate Graphical Report"
   onload = "doOnSelectProduct(0); chartTypeChanged()"
-  yui = [ 'calendar' ]
   javascript = js_data
   javascript_urls = [ "js/util.js", "js/TUI.js", "js/field.js" ]
   style_urls = ['skins/standard/buglist.css']

template/en/default/search/search-report-table.html.tmpl

@@ -18,7 +18,6 @@ var queryform = "reportform"
 [% PROCESS global/header.html.tmpl
   title = "Generate Tabular Report"
   onload = "doOnSelectProduct(0)"
-  yui = [ 'calendar' ]
   javascript = js_data
   javascript_urls = [ "js/util.js", "js/TUI.js", "js/field.js" ]
   style_urls = ['skins/standard/buglist.css']