diff --git a/packages/crayons-core/src/components/datepicker/datepicker.e2e.ts b/packages/crayons-core/src/components/datepicker/datepicker.e2e.ts index f6e37d444..61d659ad0 100644 --- 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( + '' + ); + 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( + '' + ); + 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 index 690430e3a..9e98a9b29 100644 --- 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(), {