diff --git a/.changeset/chilly-teachers-compare.md b/.changeset/chilly-teachers-compare.md new file mode 100644 index 0000000000..8adfefb780 --- /dev/null +++ b/.changeset/chilly-teachers-compare.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +[input-datepicker] Fix a locale bug diff --git a/packages/ui/components/input-datepicker/src/LionInputDatepicker.js b/packages/ui/components/input-datepicker/src/LionInputDatepicker.js index d9ac1d6c76..43f3c74ece 100644 --- a/packages/ui/components/input-datepicker/src/LionInputDatepicker.js +++ b/packages/ui/components/input-datepicker/src/LionInputDatepicker.js @@ -102,23 +102,6 @@ export class LionInputDatepicker extends ScopedElementsMixin( }; } - _inputFormatter = new Intl.DateTimeFormat('en-US', { - year: 'numeric', - month: '2-digit', - day: '2-digit', - }).formatToParts; - - /** - * @param {Date} date - */ - // eslint-disable-next-line class-methods-use-this - _formatDate(date) { - const day = String(date.getDate()).padStart(2, '0'); - const month = String(date.getMonth() + 1).padStart(2, '0'); - const year = String(date.getFullYear()); - return `${day}/${month}/${year}`; - } - get slots() { return { ...super.slots, @@ -370,18 +353,15 @@ export class LionInputDatepicker extends ScopedElementsMixin( if (this._syncOnUserSelect) { // Synchronize new selectedDate value to input this._isHandlingUserInput = true; + this._isHandlingCalendarUserInput = true; if ( Array.isArray(this.__calendarDisableDates) && this.__calendarDisableDates.includes(selectedDate) ) { // If the selected date is disabled, reset the values - this.value = ''; - this.formattedValue = ''; this.modelValue = undefined; } else { - this.formattedValue = this._formatDate(selectedDate); - this.value = this.formattedValue; this.modelValue = selectedDate; } diff --git a/packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js b/packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js index dd4361f699..a4c2b90eaf 100644 --- a/packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js +++ b/packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js @@ -263,6 +263,33 @@ describe('', () => { expect(el.value).to.equal('18/12/2019'); }); + describe('localization', () => { + /** @type {import('@lion/ui/localize.js').LocalizeManager} */ let localizeManager; + + before(async () => { + const { getLocalizeManager } = await import('@lion/ui/localize-no-side-effects.js'); + localizeManager = getLocalizeManager(); + }); + + it('should update formatted value and value in accordance of localization upon model value update', async () => { + localizeManager.locale = 'nl-NL'; + + const el = await fixture(html` + + `); + + await el.updateComplete; + + expect(el.formattedValue).to.equal('30-12-2022'); + expect(el.value).to.equal('30-12-2022'); + }); + + after(() => { + // @ts-ignore - using protected method to undo setting explict locale + localizeManager.locale = localizeManager._fallbackLocale; + }); + }); + describe('Validators', () => { /** * Validators are the Application Developer facing API in :