Lion Logo Lion Fundamentals Guides Components Blog Toggle darkmode

Input Date: Overview

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

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


  • Based on our 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


npm i --save @lion/ui
import { LionInputDate } from '@lion/ui/input-date.js';
// or
import '@lion/ui/define/lion-input-date.js';