Bug 1347069 - [DateTimeInput] (l10n) 12/24hr format for <input type=time> based on locale. r=mossop
authorJessica Jong <jjong@mozilla.com>
Tue, 21 Mar 2017 11:11:10 +0800
changeset 399209 c8e3f323a687ab2fd286303b136e7d47de8d533c
parent 399208 40911fc4bf7eff4f84add35cceb3a67d69a6e75a
child 399210 af27746771428b15ca98c5973d2d0d67d8bbccdd
push id1490
push usermtabara@mozilla.com
push dateMon, 31 Jul 2017 14:08:16 +0000
treeherdermozilla-release@70e32e6bf15e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmossop
bugs1347069
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1347069 - [DateTimeInput] (l10n) 12/24hr format for <input type=time> based on locale. r=mossop MozReview-Commit-ID: 1QJig3ZTV7R
toolkit/content/widgets/datetimebox.xml
--- a/toolkit/content/widgets/datetimebox.xml
+++ b/toolkit/content/widgets/datetimebox.xml
@@ -481,17 +481,17 @@
         /* eslint-disable no-multi-spaces */
         this.mHourPlaceHolder = ]]>"&time.hour.placeholder;"<![CDATA[;
         this.mMinutePlaceHolder = ]]>"&time.minute.placeholder;"<![CDATA[;
         this.mSecondPlaceHolder = ]]>"&time.second.placeholder;"<![CDATA[;
         this.mMillisecPlaceHolder = ]]>"&time.millisecond.placeholder;"<![CDATA[;
         this.mDayPeriodPlaceHolder = ]]>"&time.dayperiod.placeholder;"<![CDATA[;
         /* eslint-enable no-multi-spaces */
 
-        this.mHour12 = true;
+        this.mHour12 = this.is12HourTime(this.mLocales);
         this.mSeparatorText = ":";
         this.mMillisecSeparatorText = ".";
         this.mMaxLength = 2;
         this.mMillisecMaxLength = 3;
         this.mDefaultStep = 60 * 1000; // in milliseconds
 
         this.mMinHour = this.mHour12 ? 1 : 0;
         this.mMaxHour = this.mHour12 ? 12 : 23;
@@ -664,16 +664,29 @@
 
           [ amString, pmString ] = keys.map(key => result.values[key]);
 
           return { amString, pmString };
         ]]>
         </body>
       </method>
 
+      <method name="is12HourTime">
+        <parameter name="aLocales"/>
+          <body>
+          <![CDATA[
+            let options = (new Intl.DateTimeFormat(aLocales, {
+              hour: "numeric"
+            })).resolvedOptions();
+
+            return options.hour12;
+          ]]>
+          </body>
+      </method>
+
       <method name="setFieldsFromInputValue">
         <body>
         <![CDATA[
           let { hour, minute, second, millisecond } =
             this.getInputElementValues();
 
           if (this.isEmpty(hour) && this.isEmpty(minute)) {
             this.clearInputFields(true);
@@ -836,18 +849,19 @@
         <![CDATA[
           let value;
 
           // Use current time if field is empty.
           if (this.isEmpty(aTargetField.value)) {
             let now = new Date();
 
             if (aTargetField == this.mHourField) {
+              value = now.getHours();
               if (this.mHour12) {
-                value = now.getHours() % this.mMaxHour || this.mMaxHour;
+                value = (value % this.mMaxHour) || this.mMaxHour;
               }
             } else if (aTargetField == this.mMinuteField) {
               value = now.getMinutes();
             } else if (aTargetField == this.mSecondField) {
               value = now.getSeconds();
             } else if (aTargetField == this.mMillisecField) {
               value = now.getMilliseconds();
             } else {
@@ -983,22 +997,27 @@
         <![CDATA[
           let value = Number(aValue);
           if (isNaN(value)) {
             this.log("NaN on setFieldValue!");
             return;
           }
 
           if (aField.maxLength == this.mMaxLength) { // For hour, minute and second
-            if (aField == this.mHourField && this.mHour12) {
-              if (aValue == "00") {
+            if (aField == this.mHourField) {
+              if (this.mHour12) {
+                // Try to change to 12hr format if user input is 0 or greater
+                // than 12.
+                if (value == 0 && aValue.length == aField.maxLength) {
+                  value = this.mMaxHour;
+                } else {
+                  value = (value > this.mMaxHour) ? value % this.mMaxHour : value;
+                }
+              } else if (value > this.mMaxHour) {
                 value = this.mMaxHour;
-              } else {
-                // Change to 12hr format if user input is greater than 12.
-                value = (value > this.mMaxHour) ? value % this.mMaxHour : value;
               }
             }
             // prepend zero
             if (value < 10) {
               value = "0" + value;
             }
           } else if (aField.maxLength == this.mMillisecMaxLength) {
             // prepend zeroes