---
title: 'Input Date: Overview'
parts:
  - Input Date
  - Overview
eleventyNavigation:
  key: 'Input Date: Overview'
  order: 10
  parent: Input Date
  title: 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.

```js script
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';
```

```html preview-story
<lion-input-date label="Date" name="date"></lion-input-date>
```

## Features

- Based on our [input](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/input/overview.md)
- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/systems/localize/dates.md) 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](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
  - IsDate (default)
  - MinDate
  - MaxDate
  - MinMaxDate

## Installation

```bash
npm i --save @lion/ui
```

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