59 lines
1.5 KiB
JavaScript
59 lines
1.5 KiB
JavaScript
import { storiesOf, html } from '@open-wc/demoing-storybook';
|
|
import { maxDateValidator, minDateValidator, minMaxDateValidator } from '@lion/validate';
|
|
|
|
import '../lion-input-date.js';
|
|
|
|
storiesOf('Forms|Input Date', module)
|
|
.add(
|
|
'Default',
|
|
() => html`
|
|
<lion-input-date label="Date" .modelValue=${new Date('2017/06/15')}> </lion-input-date>
|
|
`,
|
|
)
|
|
.add(
|
|
'minDateValidator',
|
|
() => html`
|
|
<lion-input-date
|
|
label="MinDate"
|
|
help-text="Enter a date greater than or equal to today"
|
|
.errorValidators=${[minDateValidator(new Date())]}
|
|
>
|
|
</lion-input-date>
|
|
`,
|
|
)
|
|
.add(
|
|
'maxDateValidator',
|
|
() => html`
|
|
<lion-input-date
|
|
label="MaxDate"
|
|
help-text="Enter a date smaller than or equal to today"
|
|
.errorValidators=${[maxDateValidator(new Date())]}
|
|
>
|
|
</lion-input-date>
|
|
`,
|
|
)
|
|
.add(
|
|
'minMaxDateValidator',
|
|
() => html`
|
|
<lion-input-date
|
|
label="MinMaxDate"
|
|
help-text="Enter a date between '2018/05/24' and '2018/06/24'"
|
|
.modelValue=${new Date('2018/05/30')}
|
|
.errorValidators=${[
|
|
minMaxDateValidator({ min: new Date('2018/05/24'), max: new Date('2018/06/24') }),
|
|
]}
|
|
>
|
|
</lion-input-date>
|
|
`,
|
|
)
|
|
.add(
|
|
'Faulty prefilled',
|
|
() => html`
|
|
<lion-input-date
|
|
label="Date"
|
|
help-text="Faulty prefilled input will be cleared"
|
|
.modelValue=${'foo'}
|
|
>
|
|
</lion-input-date>
|
|
`,
|
|
);
|