lion/packages/input-date

Input Date

lion-input-date component is based on the generic text input field. Its purpose is to provide a way for users to fill in a date.

import { html } from 'lit-html';
import { MinDate, MinMaxDate, MaxDate } from '@lion/form-core';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';

import { formatDate } from '@lion/localize';

import './lion-input-date.js';

export default {
  title: 'Forms/Input Date',
};
loadDefaultFeedbackMessages();

export const main = () => html` <lion-input-date label="Date"></lion-input-date> `;

Live Demo/Documentation

See our storybook for a live demo and API documentation

Features

• Based on lion-input
• Makes use of formatDate) for formatting and parsing.
• Option to override locale to change the formatting and parsing
• Default label in different languages
• Can make use of date specific validators with corresponding error messages in different languages
  • IsDate (default)
  • MinDate
  • MaxDate
  • MinMaxDate

How to use

Installation

npm i --save @lion/input-date

import { LionInputDate } from '@lion/input-date';
// or
import '@lion/input-date/lion-input-date.js';

Examples

Is a date

export const isADate = () => html`
  <lion-input-date label="IsDate" .modelValue=${new Date('foo')}> </lion-input-date>
`;

With minimum date

export const withMinimumDate = () => html`
  <lion-input-date
    label="MinDate"
    help-text="Enter a date greater than or equal to today."
    .modelValue=${new Date('2018/05/30')}
    .validators=${[new MinDate(new Date())]}
  >
  </lion-input-date>
`;

With maximum date

export const withMaximumDate = () => html`
  <lion-input-date
    label="MaxDate"
    help-text="Enter a date smaller than or equal to today."
    .modelValue=${new Date('2100/05/30')}
    .validators=${[new MaxDate(new Date())]}
  ></lion-input-date>
`;

With minimum and maximum date

export const withMinimumAndMaximumDate = () => html`
  <lion-input-date
    label="MinMaxDate"
    .modelValue=${new Date('2018/05/30')}
    .validators=${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}
  >
    <div slot="help-text">
      Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate(
        new Date('2018/06/24'),
      )}.
    </div>
  </lion-input-date>
`;

Faulty prefilled

export const faultyPrefilled = () => html`
  <lion-input-date
    label="Date"
    help-text="Faulty prefilled input will be cleared"
    .modelValue=${'foo'}
  ></lion-input-date>
`;