lion/docs/guides/how-to/extend-a-native-input.md

How To >> Extend a native input ||20

import { html } from '@mdjs/mdjs-preview';
import { LionInput } from '@lion/ui/input.js';
import { LionInputDate } from '@lion/ui/input-date.js';
import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import '@lion/ui/define/lion-input.js';
import '../../fundamentals/systems/form/assets/h-output.js';

loadDefaultFeedbackMessages();

Input fields can be created by extending LionInput.

In case you want to wrap a custom form element, follow Create a custom Field.

For this tutorial, we create an input that wraps native input[type=datetime-local]. This is as simple as adding a type:

export const extendLionInput = () => {
  class LionInputDatetime extends LionInput {
    constructor() {
      super();
      this.type = 'datetime-local';
    }
  }
  customElements.define('lion-input-datetime', LionInputDatetime);

  return html`<lion-input-datetime label="With Date string"></lion-input-datetime>
    <h-output .show="${['modelValue', 'touched', 'dirty', 'focused']}"></h-output>`;
};

However, we might want to have a more advanced modelValue. In the example above, our modelValue is a serialized datetime string. If we want our modelValue to be of type Date, we should do the following:

export const extendLionInputDate = () => {
  function toIsoDatetime(d) {
    return d && new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().split('.')[0];
  }
  function fromIsoDatetime(value) {
    return new Date(value);
  }

  class LionInputDatetimeWithObject extends LionInputDate {
    constructor() {
      super();
      this.type = 'datetime-local';
      this.parser = fromIsoDatetime;
      this.deserializer = fromIsoDatetime;
      this.serializer = toIsoDatetime;
      this.formatter = toIsoDatetime;
    }
  }
  customElements.define('lion-input-datetime-with-object', LionInputDatetimeWithObject);

  return html`<lion-input-datetime-with-object
      label="With Date object"
    ></lion-input-datetime-with-object>
    <h-output .show="${['modelValue', 'touched', 'dirty', 'focused']}"></h-output>`;
};