Input Date: Use Cases
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 = () => {
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>
`;
};
Enter a date greater than or equal to today.
With maximum date
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>
`;
};
Enter a date smaller than or equal to today.
With minimum and maximum date
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>
`;
};
Enter a date between 24/05/2018 and
24/06/2018.
Faulty prefilled
export const faultyPrefilled = () => html`
<lion-input-date
label="Date"
help-text="Faulty prefilled input will be cleared"
.modelValue="${'foo'}"
></lion-input-date>
`;
Faulty prefilled input will be cleared