Date-Time-Picker Stable

A calendar for date inputs.

Datepicker

<div class="textfield date-time-picker js-date-time-picker"  data-select="range" data-labels="{}">
    <input id="date-time-picker" type="text" class="textfield__input date-time-picker__input">
    <label for="date-time-picker" class="textfield__label date-time-picker__label">Date…</label>
</div>

Timepicker

<div class="textfield date-time-picker js-date-time-picker"  data-select="time" data-labels="{}">
    <input id="date-time-picker" type="text" class="textfield__input date-time-picker__input">
    <label for="date-time-picker" class="textfield__label date-time-picker__label">Time…</label>
</div>

Inline Datepicker

<div class="textfield date-time-picker js-date-time-picker"  data-inline="true" data-labels="{}">
    <input id="date-time-picker" type="text" class="textfield__input date-time-picker__input">
    <label for="date-time-picker" class="textfield__label date-time-picker__label">Date…</label>
</div>

Inline Timepicker

<div class="textfield date-time-picker js-date-time-picker"  data-inline="true" data-select="time" data-labels="{}">
    <input id="date-time-picker" type="text" class="textfield__input date-time-picker__input">
    <label for="date-time-picker" class="textfield__label date-time-picker__label">Choice a time…</label>
</div>

Date range picker

<div class="textfield date-time-picker js-date-time-picker"  data-mode="range" data-labels="{}">
    <input id="date-time-picker" type="text" class="textfield__input date-time-picker__input">
    <label for="date-time-picker" class="textfield__label date-time-picker__label">Choice date period…</label>
</div>