Bug 1347069 - [DateTimeInput] (l10n) 12/24hr format for <input type=time> based on locale. r?mossop draft
authorJessica Jong <jjong@mozilla.com>
Tue, 21 Mar 2017 11:11:10 +0800
changeset 501880 ecd17d997d64f97ff8a1930e74a91cd066ec3661
parent 501879 5fe5dcf1c10a4523ba3f0a20295551462c2dae11
child 502736 931c2382dee135badd9d53a3551185cc65dd9d3c
push id50143
push userjjong@mozilla.com
push dateTue, 21 Mar 2017 03:30:13 +0000
reviewersmossop
bugs1347069
milestone55.0a1
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