From a1db718f7f53b766154a3f12e5859de65eeae617 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Thu, 31 Aug 2023 14:23:30 -0500 Subject: [PATCH] feat(input-date-picker): normalize year to current century for user typed 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. --- .../input-date-picker.e2e.ts | 17 ++-------- .../input-date-picker.stories.ts | 13 -------- .../input-date-picker/input-date-picker.tsx | 32 +++---------------- 3 files changed, 6 insertions(+), 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 index 3cb4e147b1c..136550e1626 100644 --- 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`` @@ -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(""); - 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 index e8f71139845..3383705be8c 100644 --- 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` `; darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault }; - -export const normalizeYearWithGermanLocale_TestOnly = (): string => html` -
- -
- -`; 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 index ba4a62b2575..a008dd3139d 100644 --- 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; }