Примеры

На этой странице собраны небольшие примеры того, как работает и на что способен Air Datepicker.

Базовые примеры

С опциями по умолчанию

new AirDatepicker('#input');

Статичный календарь

Для того, чтобы календарь был постоянно видимый, нужно его проинициализировать не на текстовом поле, или передать параметр {inline: true}

new AirDatepicker('#div');

// Or init with {inline: true} on <input> or <div> elements

new AirDatepicker('#input', {
    inline: true
})

Выбор даты при инициализации

Для выбора даты используйте опцию selectedDates. На принимает массив дат, строк или чисел. Подробнее можно ознакомится в разделе документации. Давайте выберем сегодняшнюю дату.

new AirDatepicker('#el', {
    selectedDates: [new Date()]
})

Выбор месяца

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

new AirDatepicker('#el', {
    view: 'months',
    minView: 'months',
    dateFormat: 'MMMM yyyy'
})

Режим для мобильных устройств

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

new AirDatepicker('#el', {
    isMobile: true,
    autoClose: true,
});

Позиционирование

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

Простое позиционирование

Базовое позиционирование задается через строку - "'основная ось 'второстепенная ось'". Например, покажем календарь справа от текстового поля:

new AirDatepicker('#el', {
    position: 'right center'
})

Использование Popper.js

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

В следующем примере обработаем позицию с помощью библиотеки Popper.js. Попробуйте проскролить страницу дальше.

import AirDatepicker from 'air-datepicker';
import {createPopper} from '@popperjs/core';

new AirDatepicker('#el', {
    container: '#scroll-container',
    visible: true,
    position({$datepicker, $target, $pointer, done}) {
        let popper = createPopper($target, $datepicker, {
            placement: 'top',
            modifiers: [
                {
                    name: 'flip',
                    options: {
                        padding: {
                            top: 64
                        }
                    }
                },
                {
                    name: 'offset',
                    options: {
                        offset: [0, 20]
                    }
                },
                {
                    name: 'arrow',
                    options: {
                        element: $pointer
                    }
                }
            ]
        })
        
        /*
		 Возвращаем функцию, которая вызывается при срабатывании `hide()`,
		 она обязательно должна вызвать функцию `done()`
 		 для завершения процесса скрытия календаря 
		*/
        return function completeHide() {
            popper.destroy();
            done();
        }    
    }
})
При использовании Popper.js, Air Datepicker автоматически повернет указатель в нужном направлении! 😎

Создание анимации появления и скрытия

Air Datepicker позволяет добавить свои анимации появления и скрытия. Вы также можете сделать это своими руками или же использовать любую библиотеку для анимаций.

Для следующего примера возьмем библиотеку anime.js и объединим ее с Popper.js

import AirDatepicker from 'air-datepicker';
import {createPopper} from '@popperjs/core';
import anime from 'animejs';

new AirDatepicker('#el', {
    position({$datepicker, $target, $pointer, isViewChange, done}) {
        let popper = createPopper($target, $datepicker, {
            placement: 'bottom',
            onFirstUpdate: state => {
                !isViewChange && anime.remove($datepicker);

                $datepicker.style.transformOrigin = 'center top';

                !isViewChange && anime({
                    targets: $datepicker,
                    opacity: [0, 1],
                    rotateX: [-90, 0],
                    easing: 'spring(1.3, 80, 5, 0)',
                })

            },
            modifiers: [
                {
                    name: 'offset',
                    options: {
                        offset: [0, 10]
                    }
                },
                {
                    name: 'arrow',
                    options: {
                        element: $pointer,
                    }
                },
                {
                    name: 'computeStyles',
                    options: {
                        gpuAcceleration: false,
                    },
                },
            ]
        });

        return () => {
            anime({
                targets: $datepicker,
                opacity: 0,
                rotateX: -90,
                duration: 300,
                easing: 'easeOutCubic'
            }).finished.then(() => {
                popper.destroy();
                done();
            })
        }
    }}
)

Диапазон дат

Для того, чтобы выбрать диапазон дат, передайте параметр {range: true}. После выбора обеих дат, можно скорректировать выбор просто перетаскивая активные даты.

new AirDatepicker('#input', {
    range: true,
    multipleDatesSeparator: ' - '
});

Минимальная и максимальные даты

Для манипуляции с минимально возможной и максимально возможной датой используйте опции minDate и maxDate. В сочетании с функцией update() можно реализовать выбор дат только в ограниченном диапазоне.

let dpMin, dpMax;

dpMin = new AirDatepicker('#el1', {
    onSelect({date}) {
        dpMax.update({
            minDate: date
        })
    }
})

dpMax = new AirDatepicker('#el2', {
    onSelect({date}) {
        dpMin.update({
            maxDate: date
        })
    }
})

Выбор времени

Передайте {timepicker: true} для выбора времени. По умолчанию устанавливается текущее время пользователя. Стартовое значение даты и времени можно регулировать с помощью параметра startDate.

new AirDatepicker('#input', {
    timepicker: true,
});

Формат времени

Формат времени задается в объекте локализации или в опции {timeFormat: '...'}. Для отображения времени в 12-ти часовом варианте, используйте символы 'h' или 'hh'. Чтобы отобразить период дня добавьте 'aa' или 'AA'.

new AirDatepicker('#input', {
    timepicker: true,
    timeFormat: 'hh:mm AA'
});

Настройка часов и минут

Время регулируется несколькими опциями, это minHours, maxHours, minMinutes, maxMinutes. Также можно настраивать шаг шкалы выбора времени с помощью hoursStep, minutesStep.

Давайте попробуем ограничивать выбор часов с 8 до 19 и добавить шаг выбора минут в значение 5.


new AirDatepicker({
    inline: true,
    timepicker: true,
    minHours: 9,
    maxHours: 18,
    minutesStep: 5
})

Содержимое ячеек

Air Datepicker позволяет изменять содержимое ячеек как угодно. Содержание, классы и статус (активный/не доступный для выбора) регулируются с помощью опции {onRenderCell: ({date, cellType}) => {})}.

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

let today = new Date();

new AirDatepicker('#inline-div', {
    // Handle render process
    onRenderCell({date, cellType}) {
        let dates = [1, 5, 7, 10, 15, 20, 25],
            emoji = ['💕', '😃', '🍙', '🍣', '🍻', '🎉', '🥁'],
            isDay = cellType === 'day',
            _date = date.getDate(),
            shouldChangeContent = isDay && dates.includes(_date),
            randomEmoji = emoji[Math.floor(Math.random() * emoji.length)];
    
        return {
            html: shouldChangeContent ? randomEmoji : false,
            classes: shouldChangeContent ? '-emoji-cell-' : false
        }
    },
    
    // Select 10th day of the month
    selectedDates: new Date(today.getFullYear(), today.getMonth(), 10)
});
.-emoji-cell- {
    --adp-cell-background-color-selected: #ffb8ff;
    --adp-cell-background-color-selected-hover: #fda5fd;
}

Изменение заголовков

В Air Datepicker есть возможность изменять подписи в навигации календаря. Можно использовать как статические варианты, так и динамические - передав функцию в соответствующую опцию. Вы можете использовать как html тэги, так и специальные токены для форматирования их в дату.

Статичный заголовок

new AirDatepicker('#el', {
    navTitles: {
        days: '<strong>yyyy</strong> <i>MMMM</i>',
        months: 'Select month of <strong>yyyy</strong>'    
    }
})

Динамический заголовок

new AirDatepicker('#el', {
    navTitles: {
        days(dp) {
            if (dp.selectedDates.length) {
                let date = dp.selectedDates[0];
                return `<small>
                   Вы выбрали  ${dp.formatDate(date, 'dd MMMM yyyy')}
                </small>`;
            }
            
            return 'Выберите дату';
        }
    }
})

Добавление кнопок

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

Предустановленные кнопки

Для добавления кнопок воспользуйтесь опцией buttons - она принимает массив строк или массив объектов с описанием кнопки.

new AirDatepicker('#el', {
    buttons: ['today', 'clear']
})

Создание своих кнопок

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

new AirDatepicker('#el', {
    buttons: [
        {
            content(dp) {
                return dp.opts.timepicker 
                    ? 'Выключить выбор времени'
                    : 'Включить выбор времени'
            },
            onClick(dp) {
                let viewDate = dp.viewDate;
                let today = new Date();
                
                // Since timepicker takes initial time from 'viewDate', set up time here, 
                // otherwise time will be equal to 00:00 if user navigated through datepicker
                viewDate.setHours(today.getHours());
                viewDate.setMinutes(today.getMinutes());

                dp.update({
                    timepicker: !dp.opts.timepicker,
                    viewDate
                })
            }
        }
    ]
})