e310c08af1
* refactor: used IsDate validator instead of custom isValidDate function * fix: used IsDate validator to validate modelValue before it's passed to lion-calendar's selctedDate * test: Updated lion-input-datepicker tests to include example of handling invalid modelValue * docs: Updated docs to include example with invalid modelValue * refactor: updated returned type of __getSyncDownValue method * changset: updated changeset for @lion/ui * refactor: linting fix * refactor: import path updated Co-authored-by: gerjanvangeest <gerjanvangeest@users.noreply.github.com> * refactor: label added to Faulty prefilled datepicker input Co-authored-by: gerjanvangeest <gerjanvangeest@users.noreply.github.com> * test: updated test to include more obvious invalid date value --------- Co-authored-by: gerjanvangeest <gerjanvangeest@users.noreply.github.com>
89 lines
2.3 KiB
Markdown
89 lines
2.3 KiB
Markdown
# Input Datepicker >> Use Cases ||20
|
|
|
|
```js script
|
|
import { html } from '@mdjs/mdjs-preview';
|
|
import { MinMaxDate, IsDateDisabled } 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-datepicker.js';
|
|
```
|
|
|
|
## Minimum and maximum date
|
|
|
|
Below are examples of different validators for dates.
|
|
|
|
```js preview-story
|
|
export const minimumAndMaximumDate = () => html`
|
|
<lion-input-datepicker
|
|
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-datepicker>
|
|
`;
|
|
```
|
|
|
|
## Disable specific dates
|
|
|
|
```js preview-story
|
|
export const disableSpecificDates = () => html`
|
|
<lion-input-datepicker
|
|
label="IsDateDisabled"
|
|
help-text="You're not allowed to choose any 15th."
|
|
.validators=${[new IsDateDisabled(d => d.getDate() === 15)]}
|
|
></lion-input-datepicker>
|
|
`;
|
|
```
|
|
|
|
## Calendar heading
|
|
|
|
You can modify the heading of the calendar with the `.calendarHeading` property or `calendar-heading` attribute for simple values.
|
|
|
|
By default, it will take the label value.
|
|
|
|
```js preview-story
|
|
export const calendarHeading = () => html`
|
|
<lion-input-datepicker
|
|
label="Date"
|
|
.calendarHeading="${'Custom heading'}"
|
|
.modelValue=${new Date()}
|
|
></lion-input-datepicker>
|
|
`;
|
|
```
|
|
|
|
## Disabled
|
|
|
|
You can disable datepicker inputs.
|
|
|
|
```js preview-story
|
|
export const disabled = () => html`
|
|
<lion-input-datepicker label="Disabled" disabled></lion-input-datepicker>
|
|
`;
|
|
```
|
|
|
|
## Read only
|
|
|
|
You can set datepicker inputs to `readonly`, which will prevent the user from opening the calendar popup.
|
|
|
|
```js preview-story
|
|
export const readOnly = () => html`
|
|
<lion-input-datepicker label="Readonly" readonly .modelValue="${new Date()}">
|
|
</lion-input-datepicker>
|
|
`;
|
|
```
|
|
|
|
## Faulty prefilled
|
|
|
|
Faulty prefilled input will be cleared
|
|
|
|
```js preview-story
|
|
export const faultyPrefilled = () => html`
|
|
<lion-input-datepicker label="Faulty prefiiled" .modelValue="${new Date('30/01/2022')}">
|
|
</lion-input-datepicker>
|
|
`;
|
|
```
|