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(), {