Air Datepicker

Basic Example #

Datepicker will automatically initialize on elements with class .datepicker-here , options may be sent via data attributes.

<input
    type="text"
    class="form-control datepicker-here"
    data-auto-close="true"
    data-language="en"
    aria-label="Datepicker"
/>

Display Inline #

Initialize plugin on non text input element, such as <div></div> , or pass the parameter {inline: true} .

<div class="datepicker-here" data-language="en"></div>

Date Range #

Use {range: true} for choosing range of dates. As dates separator multipleDatesSeparator will be used.

<input
    type="text"
    class="form-control datepicker-here"
    data-range="true"
    data-multiple-dates-separator=" - "
    data-language="en"
    aria-label="Datepicker"
/>

For possibility to select same date two times, you should set {toggleSelected: false} .

<input
    type="text"
    class="form-control datepicker-here"
    data-range="true"
    data-multiple-dates-separator=" - "
    data-toggle-selected="false"
    data-language="en"
    aria-label="Datepicker"
/>

Selecting Multiple Dates #

Pass parameter {multipleDates: true} for selection of multiple dates. If you want to limit the number of selected dates, pass the desired number {multipleDates: 3} .

<input
    type="text"
    class="form-control datepicker-here"
    data-multiple-dates="3"
    data-multiple-dates-separator=", "
    data-language="en"
    aria-label="Datepicker"
/>

Month Selection #

Pass parameter {minView: 'months'} and {view: 'months'} for selection month.

<input
    type="text"
    class="form-control datepicker-here"
    data-min-view="months"
    data-view="months"
    data-date-format="MM yyyy"
    data-auto-close="true"
    data-language="en"
    aria-label="Datepicker"
/>

Year Selection #

Pass parameter {minView: 'years'} and {view: 'years'} for selection year.

<input
    type="text"
    class="form-control datepicker-here"
    data-min-view="years"
    data-view="years"
    data-date-format="yyyy"
    data-auto-close="true"
    data-language="en"
    aria-label="Datepicker"
/>

With Timepicker #

To enable timepicker use option {timepicker: true} - it will add current time and a couple of range sliders by which one can pick time. By default current user time will be set. This value can be changed by startDate parameter.

<input
    type="text"
    class="form-control datepicker-here"
    data-min-view="years"
    data-view="years"
    data-date-format="yyyy"
    data-auto-close="true"
    data-language="en"
    aria-label="Datepicker"
/>