Datepicker

Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.

Basic Datepicker

Range of dates

For choosing range of dates use parameter `{range:true}`. After selecting both dates you could correct them by dragging active dates.

Default

Minimum and maximum dates

For manipulation with minimum and maximum possible dates use options `minDate` and `maxDate`. In combination with `update()` function you could implement limited date range that user could choose.

Timepicker

Pass `{timepicker:true}` to be able to pick time. By default the user's time is set. Start datetime value could be configured with parameter startDate.

Select Time

Time Format

Time format is set in localization object or in option `{timeFormat:'...'}`. To display time in 12-hours format use `'h'` or `'hh'` tokens. To display day period use `'aa'` or `'AA'`

Minutes and hours settings

Time is configured by several options: minHours, maxHours, minMinutes, maxMinutes. You could also set step of time slider with hoursStep, minutesStep.
Let's try to limit time by interval from 8 to 19 hours and set minute step by 5.

Formatting Title

In Air Datepicker you could change titles in calendar's navigation. You could use both static variant and dynamic - just pass a callback function to corresponding option. You could use both html tags and a special tokens to format date

Adding buttons

To make it easier to select a specific date, or to clear the selected data, you can add buttons to the calendar body. You can add one of the preset buttons or create your own.

Preinstalled Buttons

To add buttons, use the `buttons` option - it accepts an array of strings or an array of objects with a description of the button.

Make your own buttons

To create your own buttons, you need to pass a structure describing the content of the button and its behavior. Let's create a button that turns the timepikcer module on and off: