ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lion/packages/input-datepicker
History
CircleCI 7db55eda7e chore: release new versions 
- @lion/ajax@0.1.20
 - @lion/button@0.3.45
 - @lion/calendar@0.4.1
 - @lion/checkbox-group@0.3.7
 - @lion/checkbox@0.2.9
 - @lion/choice-input@0.4.7
 - @lion/dialog@0.2.1
 - @lion/field@0.6.6
 - @lion/fieldset@0.5.1
 - @lion/form-system@0.2.7
 - @lion/form@0.3.7
 - @lion/icon@0.2.10
 - @lion/input-amount@0.3.7
 - @lion/input-date@0.3.7
 - @lion/input-datepicker@0.5.1
 - @lion/input-email@0.3.7
 - @lion/input-iban@0.3.7
 - @lion/input@0.3.7
 - @lion/localize@0.7.1
 - @lion/option@0.3.7
 - @lion/overlays@0.7.1
 - @lion/popup@0.4.1
 - @lion/radio-group@0.3.7
 - @lion/radio@0.2.9
 - @lion/select-rich@0.7.1
 - @lion/select@0.3.7
 - @lion/steps@0.2.1
 - @lion/switch@0.3.8
 - @lion/tabs@0.1.3
 - @lion/textarea@0.3.7
 - @lion/tooltip@0.4.1
 - @lion/validate@0.5.1
2019-12-02 10:45:10 +00:00
..
src fix: no longer use overlay templates 2019-12-01 16:03:04 +01:00
stories feat: finalize validation and adopt it everywhere 2019-11-18 15:30:08 +01:00
test fix(datepicker): close with outside click (#386) 2019-11-27 14:19:59 +01:00
test-helpers feat: update to latest overlay system 2019-10-10 17:14:49 +02:00
translations fix: support Chinese language 2019-07-17 10:11:32 +02:00
CHANGELOG.md chore: release new versions 2019-12-02 10:45:10 +00:00
index.js feat(input-datepicker): added input-datepicker component 2019-05-16 11:05:11 +02:00
lion-input-datepicker.js feat(input-datepicker): added input-datepicker component 2019-05-16 11:05:11 +02:00
package.json chore: release new versions 2019-12-02 10:45:10 +00:00
README.md feat: finalize validation and adopt it everywhere 2019-11-18 15:30:08 +01:00
test-helpers.js fix: public test-helpers 2019-07-30 15:50:53 +02:00

README.md

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>