Документация

Добавляет дополнительные классы календарю.

Делает календарь постоянно видимым.

Язык отображения календаря. Доступные локали находятся в директории air-datepicker/locale/.

Подробнее со структурой локализации можно ознакомиться в соответствующем разделе.

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

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

Устанавливает начальную дату отображения календаря.

Индекс дня, с которого начинается неделя. Возможные значение от 0 (воскресенье) до 6 (суббота). По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет.

Индексы дней, которые будут считаться выходными. Им будет добавлен класс .-weekend-. По умолчанию это суббота и воскресенье.

Если true, то календарь будет появляться в виде модального окна с немного увеличенными размерами.

Показывает календарь сразу же после инициализации.

Формат даты. С 3 версии формат даты основывается на стандарте Unicode Technical Standard #35. По умолчанию берется из текущей локали. Значение, переданное сюда, будет иметь больший приоритет.

Вы также можете передать сюда функцию, для ручной обработки выбранных дат. Она должна возвратить строку. Если включен режим выбора нескольких дат, то в эту функцию будет передан массив выбранных дат.

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

Дополнительное текстовое поле, куда будет записываться дата с форматом из поля altFieldDateFormat

Формат даты дополнительного поля

Если true, то клик на активной ячейке снимет с нее выделение

Так же может быть функцией, в качестве параметров она получает экземпляр календаря и дату, которую пользователь пытается выбрать повторно. Если функция вернет true, то выделение будет снято, в противном случае выделение останется.

Включает навигацию по календарю с помощью клавиатуры. Работает только в случае когда элемент, на котором инициализируется календарь, является текстовым полем.

Массив активных дат. Принимает как отдельные типы данных, так и смешанные. Если будет передан невалидный формат даты, то это значение будет проигнорировано

import AirDatepicker from 'air-datepicker';

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

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

Родительский элемент для календаря. По умолчанию все календари помещаются в элемент с классом .air-datepicker-global-container.

Позиционирование календаря относительно текстового поля.

Если передать строку, то первым значением задается основная ось позиционирования, вторым - положение на этой оси. Например {position: 'top right'} - установит позицию календаря справа вверху от текстового поля.

Если передать функцию, то можно регулировать позицию самостоятельно - она будет вызвана при срабатывании метода show(). Но в таком случае все анимации отключаются и вам придется добавлять их вручную, если они требуются. Функция принимает объект из следующих полей

Если требуется ручная обработка скрытия календаря, то вы можете возвратить функцию из position - она будет вызвана при срабатывании hide() - по завершению обработки не забудьте вызвать функцию done для завершения процесса скрытия.

Пример ручной обработки позиционирования:

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';
    }
})

Начальное представление календаря. Возможные значения:

Минимально возможное представление календаря. Используется, например, когда нужно предоставить только выбор месяца. Возможные значения такие же как и у view

Если true, то в представлении дней будут отображаться даты из других месяцев.

Если true, то можно будет выбрать даты из других месяцев.

Если true, то при выборе дат из другого месяца будет осуществлен переход к этому месяцу.

Минимально возможная дата для выбора.

Максимально возможная дата для выбора.

Нужно ли запрещать переходить на следующий или предыдущий месяц/год/декаду если они выходят за рамки минимальной или максимальной дат.

Если true, то при наступлении такого сценария будут деактивироваться кнопки навигации календаря

Если true, то можно будет выбрать неограниченное количество дат. Если передать число, то количество выбираемых дат будет ограничено этим числом.

Разделитель между датами - используется в режиме множественного выбора дат и в режиме выбора диапазона.

Предоставляет возможность выбора диапазона дат. В качестве разделителя будет использовано значение из multipleDatesSeparator

Если true, то после выбора дат в режиме диапазона, их можно будет изменить путем перетаскивания курсором мыши.

Эта опция позволяет добавить кнопки в интерфейс календаря. Можно добавить как две готовые кнопки, так и создать произвольную кнопку.

Изначально доступны два варианта:

Для того, чтобы создать свою кнопку нужно передать объект следующего вида:

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

Пример произвольной кнопки

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
})

Поле из объекта локализации, которое будет использовано для отображения названий месяца в представлении months.

Событие, которому будет показан календарь.

Если true, то после выбора даты календарь будет скрыт.

Контент кнопки «Назад» в навигации календаря

Контент кнопки «Вперед» в навигации календаря

Шаблоны заголовков в навигации календаря. Можно использовать HTML теги и символы из dateFormat. Также можно передать функцию в качестве значения - она получит экземпляр календаря в качестве аргумента, и должна будет вернуть строку.

В случае, если передана функция, она будет вызываться каждый раз при смене представления, выбора даты или при переходе на другой месяц.

Значения по умолчанию:

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

Применение:

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

Задает фиксированную высоту календаря. Если true, то в каждом месяце будет отрисовываться по 6 недель.

Включает возможность выбрать время.

Если нужно выбрать только время без конкретной даты.

Разделитель между датой и временем.

Формат времени. Так же как и dateFormat опирается на Unicode Technical Standard #35. Если передать 12-часовой формат отображения часов, то ползунки времени будут автоматически подстроены под соответствующий режим.

Минимально допустимое к выбору значение часов.

Максимально допустимое к выбору значение часов.

Минимально допустимое к выбору значение минут.

Максимально допустимое к выбору значение минут.

Шаг выбора часов.

Шаг выбора минут.

Событие, которое срабатывает при выборе или снятия выбора с какой-либо даты. В качестве аргумента получает объект, состоящий из следующих полей:

Срабатывает до выбора даты. Если возвращает true, то дата будет выбрана, если false - нет. Полезно когда нужно запретить выбирать дату, но при этом сохранить обычный вид ячейки.

Срабатывает при перелистывании календаря вперед или назад. Получает в качестве аргумента объект с актуальными значениям месяца, года и декады.

При смене представления, например, с дней на месяцы, будет вызываться эта функция обратной связи. В качестве аргумента будет передано название текущего представления.

Функция, которая будет вызываться каждый раз, когда будет отрисовываться ячейка календаря. Используется, в случае если нужно каким-то образом кастомизировать ячейку, изменить содержимое или сделать недоступным к выбору.

В качестве аргумента принимает объект, описывающий текущую ячейку:

Функция должна возвращать объект, состоящий из следующих полей:

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'
                    }
                }
            }
        }
    }
})

Функция обратного вызова при появлении календаря. Вызывается вначале анимации появления, и когда анимация завершилась.

Функция обратного вызова при скрытии календаря. Вызывается вначале анимации скрытия, и когда анимация завершилась.

Добавляет возможность кликать по названиям дней в календаре. При этом, этим элементах будет добавлен класс `-clickable-`

Событие, срабатывающее при фокусировании на ячейке