fix(input-date): serialize Date as iso string without time information

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);
+  }
 }

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('<lion-input-date> integrations', () => {
   runInteractionStateMixinSuite({
     tagString,

packages/input-date/test/lion-input-date.test.js

@@ -13,17 +13,29 @@ describe('<lion-input-date>', () => {
   });
 
   it('returns undefined when value is empty string', async () => {
-    const el = await fixture(`<lion-input-date></lion-input-date>`);
+    const el = await fixture(
+      html`
+        <lion-input-date></lion-input-date>
+      `,
+    );
     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(`<lion-input-date></lion-input-date>`);
+    const el = await fixture(
+      html`
+        <lion-input-date></lion-input-date>
+      `,
+    );
     expect(el._inputNode.type).to.equal('text');
   });
 
   it('has validator "isDate" applied by default', async () => {
-    const el = await fixture(`<lion-input-date></lion-input-date>`);
+    const el = await fixture(
+      html`
+        <lion-input-date></lion-input-date>
+      `,
+    );
     el.modelValue = '2005/11/10';
     expect(el.hasFeedbackFor).to.include('error');
     expect(el.validationStates).to.have.a.property('error');
@@ -99,24 +111,39 @@ describe('<lion-input-date>', () => {
 
   it('is accessible', async () => {
     const el = await fixture(
-      `<lion-input-date><label slot="label">Label</label></lion-input-date>`,
+      html`
+        <lion-input-date><label slot="label">Label</label></lion-input-date>
+      `,
     );
     await expect(el).to.be.accessible();
   });
 
   it('is accessible when readonly', async () => {
     const el = await fixture(
-      `<lion-input-date readonly .modelValue=${new Date(
+      html`
-        '2017/06/15',
+        <lion-input-date readonly .modelValue=${new Date('2017/06/15')}
-      )}><label slot="label">Label</label></lion-input-date>`,
+          ><label slot="label">Label</label></lion-input-date
+        >
+      `,
     );
     await expect(el).to.be.accessible();
   });
 
   it('is accessible when disabled', async () => {
     const el = await fixture(
-      `<lion-input-date disabled><label slot="label">Label</label></lion-input-date>`,
+      html`
+        <lion-input-date disabled><label slot="label">Label</label></lion-input-date>
+      `,
     );
     await expect(el).to.be.accessible();
   });
+
+  it('serializes to iso format', async () => {
+    const el = await fixture(
+      html`
+        <lion-input-date .modelValue="${new Date('2000-12-12')}"></lion-input-date>
+      `,
+    );
+    expect(el.serializedValue).to.equal('2000-12-12');
+  });
 });