Merge pull request #946 from harshith-venkatesh-freshworks/fix/date-p…

…icker fix: DatePicker issue observed when selecting date for icelandic language.
freshworks · Nov 5, 2024 · f5e5084 · f5e5084
2 parents e3cc9fd + 5fef5b9
commit f5e5084
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 0 deletions.
diff --git a/packages/crayons-core/src/components/datepicker/datepicker.e2e.ts b/packages/crayons-core/src/components/datepicker/datepicker.e2e.ts
@@ -814,4 +814,40 @@ describe('fw-datepicker', () => {
     const dateVal = await dateInput.getAttribute('value');
     expect(dateVal).toBe('07/22/2022');
   });
+
+  it('should update the value of the date input when value is set, when the locale is is', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      '<fw-datepicker locale="is" value="2022-04-20"></fw-datepicker>'
+    );
+    await page.waitForChanges();
+    const dp = await page.find('fw-datepicker');
+    await dp.setProperty('value', '2022-04-20');
+    await page.waitForChanges();
+    const val = await dp.getProperty('value');
+    expect(val).toBe('20.04.2022');
+    const shadow = await page.find(
+      'fw-datepicker >>> fw-input >>> :first-child'
+    );
+    const alertElement = await shadow.find('.invalid-alert');
+    expect(alertElement).toBeFalsy();
+  });
+
+  it('should update the value of the date input when value is set, when the locale is is', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      '<fw-datepicker locale="is" value="2022-11-20"></fw-datepicker>'
+    );
+    await page.waitForChanges();
+    const dp = await page.find('fw-datepicker');
+    await dp.setProperty('value', '2022-11-20');
+    await page.waitForChanges();
+    const val = await dp.getProperty('value');
+    expect(val).toBe('20.11.2022');
+    const shadow = await page.find(
+      'fw-datepicker >>> fw-input >>> :first-child'
+    );
+    const alertElement = await shadow.find('.invalid-alert');
+    expect(alertElement).toBeFalsy();
+  });
 });
diff --git a/packages/crayons-core/src/components/datepicker/datepicker.tsx b/packages/crayons-core/src/components/datepicker/datepicker.tsx
@@ -336,6 +336,34 @@ export class Datepicker {
 
   private formatDate(value) {
     if (!value) return value;
+    // For Icelandic language, the date format is different. There is a discrepency which is handled in this PR https://github.com/date-fns/date-fns/pull/3934
+    if (this.langModule?.code === 'is' && this.dateFormat === 'dd MMM yyyy') {
+      const icelandicLanguageDisplayFormat = 'dd MMMM yyyy';
+      const icelandicMonthMapper = {
+        'jan.': 'jan.',
+        'feb.': 'feb.',
+        'mars': 'm',
+        'apríl': 'apríl',
+        'maí': 'maí',
+        'júní': 'júní',
+        'júlí': 'júlí',
+        'ágúst': 'á',
+        'sept.': 's',
+        'okt.': 'ó',
+        'nóv.': 'n',
+        'des.': 'd',
+      };
+      const correctedDate = value.replace(
+        /jan\.|feb\.|mars|apríl|maí|júní|júlí|ágúst|sept\.|okt\.|nóv\.|des\./g,
+        (match) => icelandicMonthMapper[match]
+      );
+      return formatISO(
+        parse(correctedDate, icelandicLanguageDisplayFormat, new Date(), {
+          locale: this.langModule,
+        })
+      );
+    }
+
     return this.displayFormat
       ? formatISO(
           parse(value, this.displayFormat, new Date(), {