11bbc5fff5
* 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
96 lines
2.2 KiB
Markdown
96 lines
2.2 KiB
Markdown
---
|
|
parts:
|
|
- Input Date
|
|
- Use Cases
|
|
title: 'Input Date: Use Cases'
|
|
eleventyNavigation:
|
|
key: 'Input Date: Use Cases'
|
|
order: 20
|
|
parent: Input Date
|
|
title: Use Cases
|
|
---
|
|
|
|
# Input Date: Use Cases
|
|
|
|
```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';
|
|
```
|
|
|
|
## Is a date
|
|
|
|
```js preview-story
|
|
export const isADate = () => html`
|
|
<lion-input-date label="IsDate" .modelValue="${new Date('foo')}"> </lion-input-date>
|
|
`;
|
|
```
|
|
|
|
## With minimum date
|
|
|
|
```js preview-story
|
|
export const withMinimumDate = () => {
|
|
loadDefaultFeedbackMessages();
|
|
return 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
|
|
|
|
```js preview-story
|
|
export const withMaximumDate = () => {
|
|
loadDefaultFeedbackMessages();
|
|
return 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
|
|
|
|
```js preview-story
|
|
export const withMinimumAndMaximumDate = () => {
|
|
loadDefaultFeedbackMessages();
|
|
return 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
|
|
|
|
```js preview-story
|
|
export const faultyPrefilled = () => html`
|
|
<lion-input-date
|
|
label="Date"
|
|
help-text="Faulty prefilled input will be cleared"
|
|
.modelValue="${'foo'}"
|
|
></lion-input-date>
|
|
`;
|
|
```
|