lion/docs/components/input-date/overview.md
Pavlik Kiselev 11bbc5fff5
feat: migrated the navigation metadata from inline MD title decorations to frontmatter
* feat: migrated the navigation metadata from inline MD title decorations to frontmatter

* fix: fixed frontmatter metadate for api-table MDs

* fix: fixed frontmatter eslint issue
2025-03-19 10:08:22 +01:00

1.3 KiB

parts title eleventyNavigation
Input Date
Overview
Input Date: Overview
key order parent title
Input Date: Overview 10 Input Date Overview

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.

import { html } from '@mdjs/mdjs-preview';
import { MinDate, MinMaxDate, MaxDate } from '@lion/ui/form-core.js';
import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import { formatDate } from '@lion/ui/localize.js';
import '@lion/ui/define/lion-input-date.js';
<lion-input-date label="Date" name="date"></lion-input-date>

Features

  • 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

Installation

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