Repository: siemens/ix
Pull request #1798: feat(core/date-picker): Throw console error when trying to parse invalid date string
Author: login: lzeiml
Created: 2025-03-24T14:06:44Z | Merged: 2025-03-26T13:46:12Z

## 💡 What is the current behavior?

https://agileworld.siemens.cloud/jira/browse/IX-2350
If you try to pass a date string to the date picker that does not match the configured format of the picker, the date picker will break. 

## 🆕 What is the new behavior?

Invalid date string will not be used and console error is thrown with luxon's error message:
![image](https://github.com/user-attachments/assets/0b4b4112-5bba-41c7-a33a-cb7d04e9e601)



## 🏁 Checklist

A pull request can only be merged if all of these conditions are met (where applicable):

- [ ] 🦮 Accessibility (a11y) features were implemented
- [ ] 🗺️ Internationalization (i18n) - no hard coded strings
- [ ] 📲 Responsiveness - components handle viewport changes and content overflow gracefully
- [ ] 📄 Documentation was reviewed/updated (`pnpm run docs`)
- [ ] 🧪 Unit tests were added/updated and pass (`pnpm test`)
- [ ] 📸 Visual regression tests were added/updated and pass ([Guide](https://github.com/siemens/ix/blob/main/CONTRIBUTING.md#visual-regression-testing))
- [ ] 🧐 Static code analysis passes (`pnpm lint`)
- [ ] 🏗️ Successful compilation (`pnpm build`, changes pushed)



Diff:
diff --git a/.changeset/afraid-cooks-bow.md b/.changeset/afraid-cooks-bow.md
new file mode 100644
index 00000000000..32771c9ffcc
--- /dev/null
+++ b/.changeset/afraid-cooks-bow.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+If an invalid date string is passed to the __ix-date-picker__, a console error will be thrown and the string will not be used.
diff --git a/packages/core/src/components/date-picker/date-picker.tsx b/packages/core/src/components/date-picker/date-picker.tsx
index 1427fce3521..7a9f107617e 100644
--- a/packages/core/src/components/date-picker/date-picker.tsx
+++ b/packages/core/src/components/date-picker/date-picker.tsx
@@ -76,13 +76,17 @@ export class DatePicker implements IxDatePickerComponent {
 
   @Watch('from')
   watchFromPropHandler(newValue: string) {
-    this.currFromDate = newValue
-      ? DateTime.fromFormat(newValue, this.format)
-      : undefined;
+    if (!newValue) {
+      this.currFromDate = undefined;
+
+      return;
+    }
+
+    const date = this.parseDateString(newValue);
 
-    if (this.currFromDate?.isValid) {
-      this.selectedYear = this.currFromDate.year;
-      this.selectedMonth = this.currFromDate.month - 1;
+    if (date) {
+      this.currFromDate = date;
+      this.updateSelectedYearMonth(date);
     }
   }
 
@@ -96,13 +100,17 @@ export class DatePicker implements IxDatePickerComponent {
 
   @Watch('to')
   watchToPropHandler(newValue: string) {
-    this.currToDate = newValue
-      ? DateTime.fromFormat(newValue, this.format)
-      : undefined;
+    if (!newValue) {
+      this.currToDate = undefined;
+
+      return;
+    }
+
+    const date = this.parseDateString(newValue);
 
-    if (this.currToDate?.isValid) {
-      this.selectedYear = this.currToDate.year;
-      this.selectedMonth = this.currToDate.month - 1;
+    if (date) {
+      this.currToDate = date;
+      this.updateSelectedYearMonth(date);
     }
   }
 
@@ -310,6 +318,23 @@ export class DatePicker implements IxDatePickerComponent {
     return DateTime.fromISO(this.today);
   }
 
+  private parseDateString(dateString: string): DateTime | undefined {
+    const date = DateTime.fromFormat(dateString, this.format);
+
+    if (!date.isValid) {
+      console.error(date.invalidExplanation);
+
+      return undefined;
+    }
+
+    return date;
+  }
+
+  private updateSelectedYearMonth(date: DateTime) {
+    this.selectedYear = date.year;
+    this.selectedMonth = date.month - 1;
+  }
+
   onDayBlur() {
     this.isDayFocus = false;
   }
diff --git a/packages/core/src/components/date-picker/test/date-picker.ct.ts b/packages/core/src/components/date-picker/test/date-picker.ct.ts
index 31e6315d83b..47c4fcc2c97 100644
--- a/packages/core/src/components/date-picker/test/date-picker.ct.ts
+++ b/packages/core/src/components/date-picker/test/date-picker.ct.ts
@@ -163,6 +163,31 @@ test.describe('date picker tests single', () => {
 
     expect(await eventPromise).toBeTruthy();
   });
+
+  test('keeps previous date and throws console error when invalid date string is provided', async ({
+    page,
+  }) => {
+    const datePicker = await page.locator('ix-date-picker');
+
+    const errors: string[] = [];
+    page.on('console', (message) => {
+      if (message.type() === 'error') {
+        errors.push(message.text());
+      }
+    });
+
+    await datePicker.evaluate((element: HTMLElement) => {
+      element.setAttribute('from', 'Aug 6, 2014');
+    });
+
+    expect((await getDateObj(page))[0]).toEqual({
+      from: '2023/09/05',
+      to: undefined,
+    });
+    expect(errors).toContain(
+      `the input "Aug 6, 2014" can't be parsed as format yyyy/LL/dd`
+    );
+  });
 });
 
 test.describe('date picker tests range', () => {


Reviews:
user: login: nuke-ellington
body: Component test missing
state: DISMISSED
author_association: COLLABORATOR
submitted_at: 2025-03-24T15:20:44Z
user: login: lzeiml
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-26T12:20:52Z
user: login: danielleroux
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-03-26T13:39:58Z

Review comments:
path: packages/core/src/components/date-picker/date-picker.tsx
user: login: nuke-ellington
body: Code duplication
created_at: 2025-03-24T15:20:33Z
author_association: COLLABORATOR
path: packages/core/src/components/date-picker/date-picker.tsx
user: login: lzeiml
body: Fixed the duplication and also added a test.
created_at: 2025-03-26T12:20:52Z
author_association: COLLABORATOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-03-24T14:06:49Z
body: ###  🦋  Changeset detected

Latest commit: 57085510e1f6a101c10287def7126c70dfd3a621

**The changes in this PR will be included in the next version bump.**

<details><summary>This PR includes changesets to release 4 packages</summary>

  | Name                | Type  |
| ------------------- | ----- |
| @siemens/ix         | Patch |
| @siemens/ix-angular | Patch |
| @siemens/ix-react   | Patch |
| @siemens/ix-vue     | Patch |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/siemens/ix/new/feat/date-picker-update-date-wrong-format?filename=.changeset/lovely-phones-laugh.md&value=---%0A%22%40siemens%2Fix%22%3A%20patch%0A---%0A%0Afeat(core%2Fdate-picker)%3A%20Throw%20console%20error%20when%20trying%20to%20parse%20invalid%20date%20string%0A)


author_association: NONE
user: login: sonarqubecloud[bot]
created_at: 2025-03-26T13:38:36Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=siemens_ix&pullRequest=1798) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=siemens_ix&pullRequest=1798&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=siemens_ix&pullRequest=1798&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=siemens_ix&pullRequest=1798&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=siemens_ix&pullRequest=1798&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=siemens_ix&pullRequest=1798&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=siemens_ix&pullRequest=1798)


author_association: NONE