Documentation

Adds extra classes to the calendar.

Makes the calendar to be permanently visible

Language of the calendar. Available locales are in air-datepicker/locale/.

For more information about the localization structure, see in corresponding section.

import AirDatepicker from 'air-datepicker';
import localeEn from 'air-datepicker/locale/en';

new AirDatepicker('#el', {
    locale: localeEn
})

Sets the start view date of calendar.

The index of the day from which the week begins. Possible values are from 0 (Sunday) to 6 (Saturday). By default, it is taken from the localization, if the value is passed here, it will have a higher priority.

Indexes of the days that will be considered a weekend. The .-weekend- class will be added to them. By default, this is Saturday and Sunday.

If true, then the calendar will appear as a modal window with slightly enlarged dimensions.

Shows the calendar immediately after initialization.

Date format. Since version 3, the date format is based on the Unicode Technical Standard #35 standard. By default, it is taken from the current locale. The value passed here will have a higher priority.

You can also pass a function here to manually process the selected dates. It should return a string. If the multi-date selection mode is enabled, array of selected dates will be passed to this function.

new AirDatepicker('#el', {
    dateFormat(date) {
        return date.toLocaleString('ja', {
            year: 'numeric',
            day: '2-digit',
            month: 'long'
        });
    }
})

An additional text field where the date with the format from the altFieldDateFormat field will be written

Date format for alternative field

If true, then clicking on the active cell will remove the selection from it

Also could be a function. It receives datepicker instance and date which user tries to unselect. If function will return true then selection will be removed, otherwise it will remain.

Enables keyboard navigation. It only works if the element on which the calendar is initialized is a text field.

Array of active dates. Accepts both separate data types and mixed data types. If an invalid date format is passed, this value will be ignored

import AirDatepicker from 'air-datepicker';

let startDate = new Date('2021-07-20');

new AirDatepicker('#el', {
    startDate,
    multipleDates: true,
    selectedDates: [startDate, '2021-07-25', 1626307200000]
})

Parent element for the calendar. By default all calendars are placed in element with class name .air-datepicker-global-container.

Position of the calendar relative to the text field.

If it is a string then the first value is position along the main axis, the second is position along the secondary one. For example, {position: 'top right'} - set the calendar position to the top right of the text field.

If you pass the function, you can adjust the position yourself - it will be called when the show() method is triggered. But in this case, all transitions are disabled and you will have to add them manually if they are required. The function accepts an object from the following fields

If manual processing of calendar hiding is required, then you can return the function from position - it will be called when hide() is triggered - upon completion of processing, do not forget to call the done function to complete the hiding process.

Example of manual positioning:

new AirDatepicker('#el', {
    autoClose: true,
    position({$datepicker, $target, $pointer}) {
        let coords = $target.getBoundingClientRect(),
            dpHeight = $datepicker.clientHeight,
            dpWidth = $datepicker.clientWidth;
    
        let top = coords.y + coords.height / 2 + window.scrollY - dpHeight / 2;
        let left = coords.x + coords.width / 2 - dpWidth / 2;
    
        $datepicker.style.left = `${left}px`;
        $datepicker.style.top = `${top}px`;
    
        $pointer.style.display = 'none';
    }
})

The initial view of the calendar. Possible values:

The minimum possible representation of the calendar. It is used, for example, when you need to provide only a choice of the month. The possible values are the same as for view

If true, dates from other months will be displayed in days view.

If true, it will be possible to select dates from other months.

If true, then selecting dates from another month will be causing transition to this month.

The minimum possible date to select.

The maximum possible date to select.

Whether it is necessary to prohibit switching to the next or previous month/year/decade if they go beyond the minimum or maximum dates.

If true, then calendar navigation buttons will be deactivated if such case occurs.

If true, then you can select an unlimited number of dates. If you pass a number, the number of selected dates will be limited by it's value.

Separator between dates in text field. It is used in the multiple date selection mode and in the range mode.

Provides the ability to select a date range. The value from multipleDatesSeparator will be used as the separator.

If true, then after selecting dates in range mode, they can be changed by dragging them.

This option allows you to add action buttons to body of the calendar. You could add two pre installed buttons or create your own.

Initially two buttons are available:

To create your own button you should pass and object of the following type:

ButtonShape = {
    content: string | (dpInstance) => string
    tagName?: string
    className?: string
    attrs?: object
    onClick?: (dpInstance) => void
}

Example of custom button

import AirDatepicker from 'air-datepicker';

let button = {
    content: 'Select 2021-07-26',
    className: 'custom-button-classname',
    onClick: (dp) => {
        let date = new Date('2021-07-26');
        dp.selectDate(date);
        dp.setViewDate(date);
    }
}

new AirDatepicker('#el', {
    buttons: [button, 'clear'] // Custom button, and pre-installed 'clear' button
})

A field from the localization object that will be used to display the names of the month in the months view.

DOM event on which calendar will be shown.

If true, the calendar will be hidden after selecting the date.

"Previous" button content.

"Next" button content.

Title templates in the calendar navigation. You can use HTML tags and tokens from dateFormat. You can also pass the function as a value - it will receive an instance of the calendar as an argument, and should return a string.

If a callback function is passed, it will be called every time the view changes, the date is selected, or when switching to another month.

Default values are:

let navTitlesDefaults = {
    days: 'MMMM, <i>yyyy</i>',
    months: 'yyyy',
    years: 'yyyy1 - yyyy2'
}

Usage:

new AirDatepicker('#el', {
    navTitles: {
        days: '<strong>Choose date</strong> MM, yyyy'
    }
})

Sets fixed height of the calendar. If true then there will be 6 weeks rendered in every month.

Turns on timepicker

If you need to choose only time, without date.

Separator between date and time.

Time format. Just like dateFormat relies on Unicode Technical Standard #35. If you pass a 12-hour display format, the time sliders will be automatically adjusted to the corresponding mode.

Minimum possible hours value.

Maximum possible hours value.

Minimum possible minutes value.

Maximum possible minutes value.

Hours step.

Minutes step.

Event which is triggered when selecting or deselecting date. It takes object as an argument consist of next fields:

Triggered before cell should be selected. If returns true then cell will be selected, if false then not

Triggered when navigating back and forth. It takes object as and argument with actual values of month, year and decade

When changing the view, for example, from days to months, this function will be called. The name of the current view will be passed as an argument.

A function that will be called every time a calendar cell is drawn. It is used if you need to customize the cell in some way, change the contents or make it unavailable for selection.

It takes object as an argument which is describing current cell:

This function must return an object, consist of next fields:

new AirDatepicker('#el', {
    onRenderCell({date, cellType}) {
        // Disable all 12th dates in month
        if (cellType === 'day') {
            if (date.getDate() === 12) {
                return {
                    disabled: true,
                    classes: 'disabled-class'
                    attrs: {
                        title: 'Cell is disabled'
                    }
                }
            }
        }
    }
})

Callback function when the calendar appears. Called at the beginning of the animation, and when the animation has finished.

Callback function when closing the calendar. Called at the beginning of the hide animation, and when the animation has finished.

Adds possibility to click on the names of days in calendar. In case callback is passed `-clickable-` will be added to those elements

Callback which is triggered when cell receives focus