diff --git a/packages/input-date/src/LionInputDate.js b/packages/input-date/src/LionInputDate.js index 02a38e68b..78f73f639 100644 --- a/packages/input-date/src/LionInputDate.js +++ b/packages/input-date/src/LionInputDate.js @@ -1,5 +1,4 @@ import { LocalizeMixin, formatDate, parseDate } from '@lion/localize'; -import { FieldCustomMixin } from '@lion/field'; import { LionInput } from '@lion/input'; import { IsDate } from '@lion/validate'; @@ -10,7 +9,7 @@ import { IsDate } from '@lion/validate'; * @customElement lion-input-date * @extends {LionInput} */ -export class LionInputDate extends FieldCustomMixin(LocalizeMixin(LionInput)) { +export class LionInputDate extends LocalizeMixin(LionInput) { static get properties() { return { modelValue: Date, @@ -36,4 +35,17 @@ export class LionInputDate extends FieldCustomMixin(LocalizeMixin(LionInput)) { super.connectedCallback(); this.type = 'text'; } + + // eslint-disable-next-line class-methods-use-this + serializer(modelValue) { + if (!(modelValue instanceof Date)) { + return ''; + } + return modelValue.toISOString().slice(0, 10); + } + + // eslint-disable-next-line class-methods-use-this + deserializer(serializedValue) { + return new Date(serializedValue); + } } diff --git a/packages/input-date/test/lion-input-date-integrations.test.js b/packages/input-date/test/lion-input-date-integrations.test.js index 6558ea8da..a7306a959 100644 --- a/packages/input-date/test/lion-input-date-integrations.test.js +++ b/packages/input-date/test/lion-input-date-integrations.test.js @@ -3,7 +3,6 @@ import { runFormatMixinSuite } from '@lion/field/test-suites/FormatMixin.suite.j import '../lion-input-date.js'; const tagString = 'lion-input-date'; - describe(' integrations', () => { runInteractionStateMixinSuite({ tagString, diff --git a/packages/input-date/test/lion-input-date.test.js b/packages/input-date/test/lion-input-date.test.js index 1b511bc9d..c31f897ff 100644 --- a/packages/input-date/test/lion-input-date.test.js +++ b/packages/input-date/test/lion-input-date.test.js @@ -13,17 +13,29 @@ describe('', () => { }); it('returns undefined when value is empty string', async () => { - const el = await fixture(``); + const el = await fixture( + html` + + `, + ); expect(el.parser('')).to.equal(undefined); }); it('has type="text" to activate default keyboard on mobile with all necessary symbols', async () => { - const el = await fixture(``); + const el = await fixture( + html` + + `, + ); expect(el._inputNode.type).to.equal('text'); }); it('has validator "isDate" applied by default', async () => { - const el = await fixture(``); + const el = await fixture( + html` + + `, + ); el.modelValue = '2005/11/10'; expect(el.hasFeedbackFor).to.include('error'); expect(el.validationStates).to.have.a.property('error'); @@ -99,24 +111,39 @@ describe('', () => { it('is accessible', async () => { const el = await fixture( - ``, + html` + + `, ); await expect(el).to.be.accessible(); }); it('is accessible when readonly', async () => { const el = await fixture( - ``, + html` + + `, ); await expect(el).to.be.accessible(); }); it('is accessible when disabled', async () => { const el = await fixture( - ``, + html` + + `, ); await expect(el).to.be.accessible(); }); + + it('serializes to iso format', async () => { + const el = await fixture( + html` + + `, + ); + expect(el.serializedValue).to.equal('2000-12-12'); + }); });