ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use model value chain instead of hard-coding formatted value and value (#2362)

Browse source 
* Use model value chain instead of hard-coding formatted value and value

* Add test

* Add changeset
This commit is contained in:
ByoungYong Kim 2024-09-12 14:50:22 +02:00 committed by GitHub
parent 287d34f6d5
commit 9f7935c1a3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 33 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/chilly-teachers-compare.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[input-datepicker] Fix a locale bug

22
packages/ui/components/input-datepicker/src/LionInputDatepicker.js
View file

@ -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() { get slots() {
return { return {
...super.slots, ...super.slots,
@ -370,18 +353,15 @@ export class LionInputDatepicker extends ScopedElementsMixin(
if (this._syncOnUserSelect) { if (this._syncOnUserSelect) {
// Synchronize new selectedDate value to input // Synchronize new selectedDate value to input
this._isHandlingUserInput = true; this._isHandlingUserInput = true;
this._isHandlingCalendarUserInput = true;
if ( if (
Array.isArray(this.__calendarDisableDates) && Array.isArray(this.__calendarDisableDates) &&
this.__calendarDisableDates.includes(selectedDate) this.__calendarDisableDates.includes(selectedDate)
) { ) {
// If the selected date is disabled, reset the values // If the selected date is disabled, reset the values
this.value = '';
this.formattedValue = '';
this.modelValue = undefined; this.modelValue = undefined;
} else { } else {
this.formattedValue = this._formatDate(selectedDate);
this.value = this.formattedValue;
this.modelValue = selectedDate; this.modelValue = selectedDate;
} }

27
packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js
View file

@ -263,6 +263,33 @@ describe('<lion-input-datepicker>', () => {
expect(el.value).to.equal('18/12/2019'); 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`
<lion-input-datepicker .modelValue="${new Date('2022/12/30')}"></lion-input-datepicker>
`);
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', () => { describe('Validators', () => {
/** /**
* Validators are the Application Developer facing API in <lion-input-datepicker>: * Validators are the Application Developer facing API in <lion-input-datepicker>: