feat(input-date-picker): normalize year to current century for user t…

…yped values only (#7638) **Related Issue:** #7588 ## Summary This will normalize two digit year typed by user to current century. Ex: If the user types `01/01/20` the value will be corrected to `01/01/2020` when user focus out of the input field or press a `Enter` key.
Esri · Aug 31, 2023 · a1db718 · a1db718
1 parent 7005cce
commit a1db718
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 56 deletions.
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
@@ -869,7 +869,7 @@ describe("calcite-input-date-picker", () => {
       expect(changeEvent).toHaveReceivedEventTimes(1);
     });
 
-    it("should normalize year to current century when value is parsed as attribute", async () => {
+    it("should not normalize year to current century when value is parsed as attribute", async () => {
       const page = await newE2EPage();
       await page.setContent(
         html`<calcite-input-date-picker normalize-year value="20-01-01"></calcite-input-date-picker>`
@@ -878,7 +878,7 @@ describe("calcite-input-date-picker", () => {
       const element = await page.find("calcite-input-date-picker");
       const changeEvent = await page.spyOnEvent("calciteInputDatePickerChange");
 
-      expect(await element.getProperty("value")).toBe("2020-01-01");
+      expect(await element.getProperty("value")).toBe("0020-01-01");
       expect(await element.getProperty("valueAsDate")).toBeDefined();
       expect(changeEvent).toHaveReceivedEventTimes(0);
     });
@@ -905,18 +905,5 @@ describe("calcite-input-date-picker", () => {
       expect(await element.getProperty("value")).toEqual(["2020-01-01", "2020-02-02"]);
       expect(changeEvent).toHaveReceivedEventTimes(2);
     });
-
-    it("should normalize year to current century when value is changed programmatically in range", async () => {
-      const page = await newE2EPage();
-      await page.setContent("<calcite-input-date-picker normalize-year  range></calcite-input-date-picker>");
-      const element = await page.find("calcite-input-date-picker");
-      const changeEvent = await page.spyOnEvent("calciteInputDatePickerChange");
-
-      element.setProperty("value", ["00-03-07", "00-03-08"]);
-      await page.waitForChanges();
-
-      expect(await element.getProperty("value")).toEqual(["2000-03-07", "2000-03-08"]);
-      expect(changeEvent).toHaveReceivedEventTimes(0);
-    });
   });
 });
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -96,16 +96,3 @@ export const darkModeRTL_TestOnly = (): string => html`
   </div>
 `;
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
-
-export const normalizeYearWithGermanLocale_TestOnly = (): string => html`
-  <div style="width: 400px">
-    <calcite-input-date-picker normalize-year range lang="de"></calcite-input-date-picker>
-  </div>
-  <script>
-    (async () => {
-      await customElements.whenDefined("calcite-input-date-picker");
-      const inputDatePicker = await document.querySelector("calcite-input-date-picker").componentOnReady();
-      inputDatePicker.value = ["00-03-07", "00-03-08"];
-    })();
-  </script>
-`;
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -157,16 +157,8 @@ export class InputDatePicker
       let newValueAsDate: Date | Date[];
 
       if (Array.isArray(newValue)) {
-        if (isTwoDigitYear(newValue[0]) || isTwoDigitYear(newValue[1])) {
-          this.value = newValue.map((val) => this.getNormalizedDate(val));
-          return;
-        }
         newValueAsDate = getValueAsDateRange(newValue);
       } else if (newValue) {
-        if (isTwoDigitYear(newValue)) {
-          this.value = this.getNormalizedDate(newValue);
-          return;
-        }
         newValueAsDate = dateFromISO(newValue);
       } else {
         newValueAsDate = undefined;
@@ -283,11 +275,6 @@ export class InputDatePicker
    */
   @Prop({ reflect: true }) name: string;
 
-  /**
-   * Normalizes year to current century.
-   */
-  @Prop({ reflect: true }) normalizeYear = false;
-
   /**
    * Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.
    *
@@ -450,17 +437,9 @@ export class InputDatePicker
     const { open } = this;
     open && this.openHandler(open);
     if (Array.isArray(this.value)) {
-      if (isTwoDigitYear(this.value[0]) || isTwoDigitYear(this.value[1])) {
-        this.value = this.value.map((val) => this.getNormalizedDate(val));
-        return;
-      }
       this.valueAsDate = getValueAsDateRange(this.value);
     } else if (this.value) {
       try {
-        if (isTwoDigitYear(this.value)) {
-          this.value = this.getNormalizedDate(this.value);
-          return;
-        }
         this.valueAsDate = dateFromISO(this.value);
       } catch (error) {
         this.warnAboutInvalidValue(this.value);
@@ -1051,13 +1030,13 @@ export class InputDatePicker
 
     const newStartDate = valueIsArray ? valueAsDate[0] : null;
     let newStartDateISO = valueIsArray ? dateToISO(newStartDate) : "";
-    if (newStartDateISO && isTwoDigitYear(newStartDateISO)) {
+    if (newStartDateISO) {
       newStartDateISO = this.getNormalizedDate(newStartDateISO);
     }
 
     const newEndDate = valueIsArray ? valueAsDate[1] : null;
     let newEndDateISO = valueIsArray ? dateToISO(newEndDate) : "";
-    if (newEndDateISO && isTwoDigitYear(newEndDateISO)) {
+    if (newEndDateISO) {
       newEndDateISO = this.getNormalizedDate(newEndDateISO);
     }
 
@@ -1092,10 +1071,7 @@ export class InputDatePicker
 
     const oldValue = this.value;
     let newValue = dateToISO(value as Date);
-
-    if (isTwoDigitYear(newValue)) {
-      newValue = this.getNormalizedDate(newValue);
-    }
+    newValue = this.getNormalizedDate(newValue);
 
     if (newValue === oldValue) {
       return;
@@ -1150,7 +1126,7 @@ export class InputDatePicker
       return "";
     }
 
-    if (!this.normalizeYear) {
+    if (!isTwoDigitYear(value)) {
       return value;
     }