Bug 1201266: Migrate YUI calendar to jQuery

r=gerv

14 files changed, 59 insertions, 127 deletions

diff --git a/template/en/default/bug/create/create.html.tmpl b/template/en/default/bug/create/create.html.tmpl
index 367292756..e0fdd13b9 100644
--- a/template/en/default/bug/create/create.html.tmpl
+++ b/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" ]
diff --git a/template/en/default/bug/field.html.tmpl b/template/en/default/bug/field.html.tmpl
index 87725b699..fe649d50d 100644
--- a/template/en/default/bug/field.html.tmpl
+++ b/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 %]"
diff --git a/template/en/default/bug/show-header.html.tmpl b/template/en/default/bug/show-header.html.tmpl
index 473df17da..da9d5f73b 100644
--- a/template/en/default/bug/show-header.html.tmpl
+++ b/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  %]
diff --git a/template/en/default/bug/summarize-time.html.tmpl b/template/en/default/bug/summarize-time.html.tmpl
index 9613eebf1..84eb75615 100644
--- a/template/en/default/bug/summarize-time.html.tmpl
+++ b/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 %]
diff --git a/template/en/default/global/calendar.js.tmpl b/template/en/default/global/calendar.js.tmpl
deleted file mode 100644
index 26f3fa023..000000000
--- a/template/en/default/global/calendar.js.tmpl
+++ /dev/null
@@ -1,33 +0,0 @@
-[%# 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 %]');
diff --git a/template/en/default/global/header.html.tmpl b/template/en/default/global/header.html.tmpl
index af9c8b686..6a52e7840 100644
--- a/template/en/default/global/header.html.tmpl
+++ b/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. 
diff --git a/template/en/default/list/list.html.tmpl b/template/en/default/list/list.html.tmpl
index 190b2193c..42af50123 100644
--- a/template/en/default/list/list.html.tmpl
+++ b/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"
diff --git a/template/en/default/reports/create-chart.html.tmpl b/template/en/default/reports/create-chart.html.tmpl
index 6b5fa5fe3..533c631ed 100644
--- a/template/en/default/reports/create-chart.html.tmpl
+++ b/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 %]  
diff --git a/template/en/default/search/field.html.tmpl b/template/en/default/search/field.html.tmpl
index b2013eff6..765ede557 100644
--- a/template/en/default/search/field.html.tmpl
+++ b/template/en/default/search/field.html.tmpl
@@ -55,34 +55,21 @@
       tag_name = "span"
       editable = 1
     %]
-    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>               
-    to <input name="[% field.name FILTER html %]to" 
+    from <input name="[% field.name FILTER html %]from"
+                id="[% field.name FILTER html %]"
+                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">      
diff --git a/template/en/default/search/form.html.tmpl b/template/en/default/search/form.html.tmpl
index 410bd2d20..30835b1b0 100644
--- a/template/en/default/search/form.html.tmpl
+++ b/template/en/default/search/form.html.tmpl
@@ -307,26 +307,18 @@ 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>
-           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.chfieldfrom.0 FILTER html %]">
+    and
+    <input name="chfieldto" size="10" id="chfieldto"
+           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>
-  </li>    
+      $(function() {
+        $("#chfieldfrom").datepicker();
+        $("#chfieldto").datepicker();
+      });
+    </script>
+  </li>
 </ul>
 
 [%############################################################################%]
diff --git a/template/en/default/search/search-advanced.html.tmpl b/template/en/default/search/search-advanced.html.tmpl
index af07aa475..ae4a72812 100644
--- a/template/en/default/search/search-advanced.html.tmpl
+++ b/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']
diff --git a/template/en/default/search/search-create-series.html.tmpl b/template/en/default/search/search-create-series.html.tmpl
index 6df1a79d3..87be44f8c 100644
--- a/template/en/default/search/search-create-series.html.tmpl
+++ b/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']
diff --git a/template/en/default/search/search-report-graph.html.tmpl b/template/en/default/search/search-report-graph.html.tmpl
index 6cbafd11c..4f882ea0e 100644
--- a/template/en/default/search/search-report-graph.html.tmpl
+++ b/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']
diff --git a/template/en/default/search/search-report-table.html.tmpl b/template/en/default/search/search-report-table.html.tmpl
index 18c871313..09a8b18b8 100644
--- a/template/en/default/search/search-report-table.html.tmpl
+++ b/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']