Date picker

Use the function chi.datepicker(elem) to instantiate a new date picker component in the input of type text element passed as a parameter. This component uses the Day.js library.

Input of type text should be used and any other type, including type date, will be converted into type text.

Base

<div class="a-inputWrapper -icon--right">
  <input id='#datepicker-1' type="text" class="a-input" placeholder="MM/DD/YYYY" value="">
  <div class="a-icon -text--muted">
    <svg>
      <use xlink:href="#icon-date"></use>
    </svg>
  </div>
</div>

<script>chi.datePicker(document.getElementById('datepicker-1'));</script>

Value, min and max options

<div class="a-inputWrapper -icon--right">
  <input value="01/24/2019" min="01/14/2019" max="02/07/2019" id='#datepicker-2' type="text" class="a-input" placeholder="MM/DD/YYYY">
  <div class="a-icon -text--muted">
    <svg>
      <use xlink:href="#icon-date"></use>
    </svg>
  </div>
</div>

<script>chi.datePicker(document.getElementById('datepicker-2'));</script>

Options

This component accepts options to configure its behavior.

Option
Default
Description
date
null
Sets the initial date into the date picker. Overrides the value of the input.
locale
'en'
Sets the locale for names of months and days of the week. The locales supported are the ones supported by Day.js. Locales must be imported before using them. List of supported locales.
min
'01/01/1900'
Prevent user pick a date before the configured.
max
'12/31/2100'
Prevent user pick a date after the configured.
format
'MM/DD/YYYY'
Format of the date used in the input.

Advanced

Value and min options programmatically

<div class="a-inputWrapper -icon--right">
  <input id='#datepicker-3' type="text" class="a-input" placeholder="MM/DD/YYYY" value="">
  <div class="a-icon -text--muted">
    <svg>
      <use xlink:href="#icon-date"></use>
    </svg>
  </div>
</div>

<script>
  chi.datePicker(
    document.getElementById('datepicker-3'),
    {
      date: '01/24/2019',
      min: '01/24/2019'
    }
 );
</script>