1189 - IdsTimepicker Fix formatting when day period goes first in the time format

doc/CHANGELOG.md

@@ -11,6 +11,7 @@
 - `[Input/TriggerField]` Web component now displays as `inline`, similar to HTMLInputElement. ([#1157](https://github.com/infor-design/enterprise-wc/issues/1157))
 - `[Popup]` Unset text align coming from HTML attribute. ([#1200](https://github.com/infor-design/enterprise-wc/issues/1200))
 - `[PopupMenu]` Added scrollable behavior to `max-height`-enabled popup menus. ([#1205](https://github.com/infor-design/enterprise-wc/issues/1205))
+- `[TimePicker]` Fixed formatting when day period goes first in the time format. ([#1189](https://github.com/infor-design/enterprise-wc/issues/1189))
 
 ## 1.0.0-beta.8
 

src/components/ids-locale/ids-locale.ts

@@ -487,7 +487,7 @@ class IdsLocale {
       if (showDayPeriods && calendar) {
         result = result.replace(' a', ` ${hours >= 12 ? calendar.dayPeriods[1] : calendar.dayPeriods[0]}`);
         if (pattern.indexOf('a') === 0) {
-          result = result.replace(' a', ` ${hours >= 12 ? calendar.dayPeriods[1] : calendar.dayPeriods[0]}`);
+          result = result.replace('a', ` ${hours >= 12 ? calendar.dayPeriods[1] : calendar.dayPeriods[0]}`);
         }
       }
 
@@ -760,7 +760,7 @@ class IdsLocale {
     dateString = dateString.replace(' de ', ' ');
 
     // Fix ah
-    dateFormat = dateFormat.replace('/ah/', '/a/h/');
+    dateFormat = dateFormat.replace('ah', 'a/h');
     dateString = dateString.replace('午', '午/');
 
     // Remove commas

src/components/ids-time-picker/demos/example.html

@@ -15,7 +15,7 @@
     <ids-layout-grid auto-fit="true" min-col-width="150px" padding-x="md">
       <ids-layout-grid-cell>
         <ids-time-picker label="Time Picker - default" id="e2e-timepicker-default" placeholder="Default"></ids-time-picker>
-        <ids-time-picker label="Time Picker - required" id="e2e-timepicker-required" validate="required time" format="h:mm a" placeholder="Start time" mask="true"></ids-time-picker>
+        <ids-time-picker label="Time Picker - required" id="e2e-timepicker-required" validate="required time" placeholder="Start time" mask="true"></ids-time-picker>
         <ids-time-picker label="Time Picker - autoselect" id="e2e-timepicker-autoselect" autoselect mask="true"></ids-time-picker>
         <ids-time-picker label="Time Picker - autoupdate" id="e2e-timepicker-autoupdate" autoupdate value="1:00 AM" mask="true"></ids-time-picker>
         <ids-time-picker label="Time Picker - disabled" id="e2e-timepicker-disabled" disabled value="12:30 PM"></ids-time-picker>

src/components/ids-time-picker/ids-time-picker-popup.ts

@@ -240,10 +240,10 @@ class IdsTimePickerPopup extends Base {
   }
 
   /**
-   * @returns {boolean} returns true if the timepicker format includes the am/pm period (" a")
+   * @returns {boolean} returns true if the timepicker format includes a day period ("a")
    */
   #hasPeriod(): boolean {
-    return this.#is12Hours() && this.format.toLowerCase().includes(' a');
+    return this.#is12Hours() && (this.format.toLowerCase().indexOf(' a') > -1 || this.format.toLowerCase().indexOf('a') === 0);
   }
 
   /**

src/components/ids-time-picker/ids-time-picker.ts

@@ -293,10 +293,6 @@ export default class IdsTimePicker extends Base {
       if (!currentId) return;
 
       this.setAttribute(currentId, e.detail.value);
-
-      if (this.autoupdate) {
-        this.#setTimeOnField();
-      }
     });
 
     this.offEvent('timeselected');
@@ -335,21 +331,36 @@ export default class IdsTimePicker extends Base {
     return this;
   }
 
-  /** Translate Labels on Language Change */
-  onLanguageChange = () => {
-    if (!this.hasAttribute(attributes.FORMAT)) {
-      this.setAttribute(attributes.FORMAT, this.localeAPI?.calendar().timeFormat);
+  /**
+   * Respond to changing locale
+   */
+  onLocaleChange = () => {
+    if (this.picker) {
+      this.picker.format = this.format;
+      this.picker.locale = this.locale;
+    }
+    if (this.input) {
+      this.input.format = this.format;
+      this.input.locale = this.locale;
     }
+    this.#applyMask();
+    this.picker?.renderDropdowns();
+  };
+
+  /**
+   * Respond to changing language
+   */
+  onLanguageChange = () => {
     this.picker?.renderDropdowns();
-    this.#setTimeValidation();
   };
 
   /**
    * Parse input date and populate dropdowns
    */
   #parseInputValue(): void {
+    const value = this.input?.value || this.value;
     const inputDate = this.localeAPI?.parseDate(
-      this.input?.value || this.value,
+      value,
       { dateFormat: this.format }
     ) as Date;
     const hours24 = inputDate?.getHours();
@@ -359,31 +370,31 @@ export default class IdsTimePicker extends Base {
     const period = inputDate && this.localeAPI?.calendar()?.dayPeriods[hours24 >= 12 ? 1 : 0];
 
     if (this.#is24Hours() && hours24 !== this.hours) {
-      this.hours = hours24;
+      this.hours = hours24 >= 0 ? hours24 : null;
     }
 
     if (this.#is12Hours() && hours12 !== this.hours) {
-      this.hours = hours12;
+      this.hours = hours12 >= 0 ? hours12 : null;
     }
 
     if (minutes !== this.minutes) {
-      this.minutes = minutes;
+      this.minutes = minutes >= 0 ? minutes : null;
     }
 
     if (seconds !== this.seconds) {
-      this.seconds = seconds;
+      this.seconds = seconds >= 0 ? seconds : null;
     }
 
-    if (this.#hasPeriod()) {
+    if (this.#hasPeriod() && period !== this.period) {
       this.period = period;
     }
   }
 
   /**
-   * @returns {boolean} returns true if the timepicker format includes the am/pm period (" a")
+   * @returns {boolean} returns true if the timepicker format includes a day period ("a")
    */
   #hasPeriod(): boolean {
-    return this.#is12Hours() && this.format.toLowerCase().includes(' a');
+    return this.#is12Hours() && (this.format.toLowerCase().indexOf(' a') > -1 || this.format.toLowerCase().indexOf('a') === 0);
   }
 
   /**