ayo/lion

Thomas Allmer 396deb2e3b feat: finalize validation and adopt it everywhere

Co-authored-by: Alex Ghiu <alex.ghiu@ing.com>
Co-authored-by: Gerjan van Geest <Gerjan.van.Geest@ing.com>
Co-authored-by: Thijs Louisse <Thijs.Louisse@ing.com>
Co-authored-by: Joren Broekema <joren.broekema@ing.com>
Co-authored-by: Erik Kroes <erik.kroes@ing.com>

2019-11-18 15:30:08 +01:00

1.3 KiB

Raw Blame History

Input Datepicker

lion-input-datepicker component is based on the date text input field. Its purpose is to provide a way for users to fill in a date with a datepicker. For an input field with a big range, such as birthday-input, a datepicker is not the ultimate tool, so use the standard lion-input-date.

Features

input field with a datepicker to help to choose a date
based on lion-input-date
makes use of lion-calendar inside the datepicker
makes use of formatDate for formatting and parsing.
option to overwrite locale to change the formatting and parsing
can make use of date specific validators with corresponding error messages in different languages
- IsDate (default)
- MinDate
- MaxDate
- MinMaxDate
- IsDateDisabled

How to use

Installation

npm i --save @lion/input-datepicker

import '@lion/input-datepicker/lion-input-datepicker.js';

// validator import example
import { Required, MinDate } from '@lion/validate';

Example

<lion-input-datepicker
  name="date"
  .validators="${[new Required(), new MinDate(new Date('2018/05/24'))]}"
></lion-input-datepicker>

1.3 KiB Raw Blame History