Show date and time on Schedules and Details in UTC (TNL-85).

cms/static/js/models/settings/course_details.js

-define(["backbone", "underscore", "gettext"], function(Backbone, _, gettext) {
+define(["backbone", "underscore", "gettext", "date"], function(Backbone, _, gettext, date) {
 
 var CourseDetails = Backbone.Model.extend({
     defaults: {
@@ -21,16 +21,16 @@ var CourseDetails = Backbone.Model.extend({
     // When init'g from html script, ensure you pass {parse: true} as an option (2nd arg to reset)
     parse: function(attributes) {
         if (attributes['start_date']) {
-            attributes.start_date = new Date(attributes.start_date);
+            attributes.start_date = date.parse(attributes.start_date);
         }
         if (attributes['end_date']) {
-            attributes.end_date = new Date(attributes.end_date);
+            attributes.end_date = date.parse(attributes.end_date);
         }
         if (attributes['enrollment_start']) {
-            attributes.enrollment_start = new Date(attributes.enrollment_start);
+            attributes.enrollment_start = date.parse(attributes.enrollment_start);
         }
         if (attributes['enrollment_end']) {
-            attributes.enrollment_end = new Date(attributes.enrollment_end);
+            attributes.enrollment_end = date.parse(attributes.enrollment_end);
         }
         return attributes;
     },

cms/static/js/views/settings/main.js

-define(["js/views/validation", "codemirror", "underscore", "jquery", "jquery.ui", "tzAbbr", "js/models/uploads",
+define(["js/views/validation", "codemirror", "underscore", "jquery", "jquery.ui", "js/utils/date_utils", "js/models/uploads",
     "js/views/uploads", "js/utils/change_on_enter", "jquery.timepicker", "date"],
-    function(ValidatingView, CodeMirror, _, $, ui, tzAbbr, FileUploadModel, FileUploadDialog, TriggerChangeEventOnEnter) {
+    function(ValidatingView, CodeMirror, _, $, ui, DateUtils, FileUploadModel, FileUploadDialog, TriggerChangeEventOnEnter) {
 
 var DetailsView = ValidatingView.extend({
     // Model class is CMS.Models.Settings.CourseDetails
@@ -12,7 +12,7 @@ var DetailsView = ValidatingView.extend({
         "change textarea" : "updateModel",
         'click .remove-course-introduction-video' : "removeVideo",
         'focus #course-overview' : "codeMirrorize",
-        'mouseover #timezone' : "updateTime",
+        'mouseover .timezone' : "updateTime",
         // would love to move to a general superclass, but event hashes don't inherit in backbone :-(
         'focus :input' : "inputFocus",
         'blur :input' : "inputUnfocus",
@@ -35,8 +35,6 @@ var DetailsView = ValidatingView.extend({
             $(this).show();
         });
 
-        this.$el.find('#timezone').html("(" + tzAbbr() + ")");
-
         this.listenTo(this.model, 'invalid', this.handleValidationError);
         this.listenTo(this.model, 'change', this.showNotificationBar);
         this.selectorToField = _.invert(this.fieldToSelectorMap);
@@ -81,11 +79,15 @@ var DetailsView = ValidatingView.extend({
     },
 
     updateTime : function(e) {
-        var now = new Date();
-        var hours = now.getHours();
-        var minutes = now.getMinutes();
-        $(e.currentTarget).attr('title', (hours % 12 === 0 ? 12 : hours % 12) + ":" + (minutes < 10 ? "0" : "")  +
-                now.getMinutes() + (hours < 12 ? "am" : "pm") + " (current local time)");
+        var now = new Date(),
+            hours = now.getUTCHours(),
+            minutes = now.getUTCMinutes(),
+            currentTimeText = gettext('%(hours)s:%(minutes)s (current UTC time)');
+
+        $(e.currentTarget).attr('title', interpolate(currentTimeText, {
+            'hours': hours,
+            'minutes': minutes
+        }, true));
     },
 
     setupDatePicker: function (fieldName) {
@@ -95,13 +97,8 @@ var DetailsView = ValidatingView.extend({
         var timefield = $(div).find("input:.time");
         var cachethis = this;
         var setfield = function () {
-            var date = datefield.datepicker('getDate');
-            if (date) {
-                var time = timefield.timepicker("getSecondsFromMidnight");
-                if (!time) {
-                    time = 0;
-                }
-                var newVal = new Date(date.getTime() + time * 1000);
+            var newVal = DateUtils.getDate(datefield, timefield);
+            if (newVal) {
                 if (!cacheModel.has(fieldName) || cacheModel.get(fieldName).getTime() !== newVal.getTime()) {
                     cachethis.clearValidationErrors();
                     cachethis.setAndValidate(fieldName, newVal);
@@ -126,13 +123,14 @@ var DetailsView = ValidatingView.extend({
         timefield.on('changeTime', setfield);
         timefield.on('input', setfield);
 
-        datefield.datepicker('setDate', this.model.get(fieldName));
+        date = this.model.get(fieldName)
         // timepicker doesn't let us set null, so check that we have a time
-        if (this.model.has(fieldName)) {
-            timefield.timepicker('setTime', this.model.get(fieldName));
-        } // but reset the field either way
+        if (date) {
+            DateUtils.setDate(datefield, timefield, date);
+        } // but reset fields either way
         else {
             timefield.val('');
+            datefield.val('');
         }
     },
 

cms/templates/base.html

@@ -69,7 +69,6 @@
             "jquery.immediateDescendents": "coffee/src/jquery.immediateDescendents",
             "datepair": "js/vendor/timepicker/datepair",
             "date": "js/vendor/date",
-            "tzAbbr": "js/vendor/tzAbbr",
             "underscore": "js/vendor/underscore-min",
             "underscore.string": "js/vendor/underscore.string.min",
             "backbone": "js/vendor/backbone-min",

cms/templates/settings.html

@@ -152,7 +152,7 @@ require(["domReady!", "jquery", "js/models/settings/course_details", "js/views/s
               <div class="field time" id="field-course-start-time">
                 <label for="course-start-time">${_("Course Start Time")}</label>
                 <input type="text" class="time start timepicker" id="course-start-time" value="" placeholder="HH:MM" autocomplete="off" />
-                <span class="tip tip-stacked" id="timezone"></span>
+                <span class="tip tip-stacked timezone">${_("(UTC)")}</span>
               </div>
             </li>
 
@@ -166,7 +166,7 @@ require(["domReady!", "jquery", "js/models/settings/course_details", "js/views/s
               <div class="field time" id="field-course-end-time">
                 <label for="course-end-time">${_("Course End Time")}</label>
                 <input type="text" class="time end" id="course-end-time" value="" placeholder="HH:MM" autocomplete="off" />
-                <span class="tip tip-stacked" id="timezone"></span>
+                <span class="tip tip-stacked timezone">${_("(UTC)")}</span>
               </div>
             </li>
           </ol>
@@ -182,7 +182,7 @@ require(["domReady!", "jquery", "js/models/settings/course_details", "js/views/s
               <div class="field time" id="field-enrollment-start-time">
                 <label for="course-enrollment-start-time">${_("Enrollment Start Time")}</label>
                 <input type="text" class="time start" id="course-enrollment-start-time" value="" placeholder="HH:MM" autocomplete="off" />
-                <span class="tip tip-stacked" id="timezone"></span>
+                <span class="tip tip-stacked timezone">${_("(UTC)")}</span>
               </div>
             </li>
 
@@ -196,7 +196,7 @@ require(["domReady!", "jquery", "js/models/settings/course_details", "js/views/s
               <div class="field time" id="field-enrollment-end-time">
                 <label for="course-enrollment-end-time">${_("Enrollment End Time")}</label>
                 <input type="text" class="time end" id="course-enrollment-end-time" value="" placeholder="HH:MM" autocomplete="off" />
-                <span class="tip tip-stacked" id="timezone"></span>
+                <span class="tip tip-stacked timezone">${_("(UTC)")}</span>
               </div>
             </li>
           </ol>

common/static/js/vendor/tzAbbr.js

-/* Friendly timezone abbreviations in client-side JavaScript
-
-`tzAbbr()` or `tzAbbr(new Date(79,5,24))`
-=> "EDT", "CST", "GMT", etc.!
-
-There's no 100% reliable way to get friendly timezone names in all
-browsers using JS alone, but this tiny function scours a
-stringified date as best it can and returns `null` in the few cases
-where no friendly timezone name is found (so far, just Opera).
-
-Device tested & works in:
-* IE 6 [through] 11 (latest versions of all)
-* Firefox 3 [through] 16 (16 = latest version to date)
-* Chrome 22 (latest version to date)
-* Safari 6 (latest version to date)
-* Mobile Safari on iOS 5 & 6
-* Android 4.0.3 stock browser
-* Android 2.3.7 stock browser
-* IE Mobile 9 (WP 7.5)
-
-Known to fail in:
-* Opera 12 (desktop, latest version to date)
-
-For Opera, I've included (but commented out) a workaround spotted
-on StackOverflow that returns a GMT offset when no abbreviation is
-found. I haven't found a decent workaround.
-
-If you find any other cases where this method returns null or dodgy
-results, please say so in the comments; even if we can't find a
-workaround it'll at least help others determine if this approach is
-suitable for their project!
-*/
-define([], function() {
-  return function (dateInput) {
-    var dateObject = dateInput || new Date(),
-      dateString = dateObject + "",
-      tzAbbr = (
-        // Works for the majority of modern browsers
-        dateString.match(/\(([^\)]+)\)$/) ||
-        // IE outputs date strings in a different format:
-        dateString.match(/([A-Z]+) [\d]{4}$/)
-      );
-
-    if (tzAbbr) {
-      // Old Firefox uses the long timezone name (e.g., "Central
-      // Daylight Time" instead of "CDT")
-      /*
-         If the timezone string does not cotain capital English letters
-         (For example, the timezone string may be a Chinese string),
-         then the following code line will produce a null-reference
-         exception, and the execution of the javascript codes will 
-         be stopped, which may cause some strange behaviors. So a 
-         try-catch is needed here to prevent the execution being stopped.
-      */
-      try {
-          tzAbbr = tzAbbr[1].match(/[A-Z]/g).join("");
-      } catch(err) {
-          tzAbbr = tzAbbr[1];
-      }
-    }
-
-    // Uncomment these lines to return a GMT offset for browsers
-    // that don't include the user's zone abbreviation (e.g.,
-    // "GMT-0500".) I prefer to have `null` in this case, but
-    // you may not!
-    // First seen on: http://stackoverflow.com/a/12496442
-    // if (!tzAbbr && /(GMT\W*\d{4})/.test(dateString)) {
-    //  return RegExp.$1;
-    // }
-
-    return tzAbbr;
-  };
-});