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

Date

<div class="m-form__item">
  <label class="a-label" for="datepicker-1">Range label</label>
  <div class="m-input__wrapper -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>
</div>

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

Value, min and max options

Date

<div class="m-form__item">
  <label class="a-label" for="datepicker-2">Date</label>
  <div class="m-input__wrapper -icon--right">
    <input id="datepicker-2" type="text" class="a-input" value="01/24/2019" min="01/14/2019" max="02/07/2019" placeholder="MM/DD/YYYY">
    <div class="a-icon -text--muted">
      <svg>
        <use xlink:href="#icon-date"></use>
      </svg>
    </div>
  </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

Date

<div class="m-form__item">
  <label class="a-label" for="datepicker-3">Date</label>
  <div class="m-input__wrapper -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>
</div>

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