Вступление #

Календарь реализован на базе Air datepicker.

Установка #

Пример разметки и инициализации календаря.

    <input class="js-datepicker" type="text" readonly placeholder="Выберите дату">

    <!-- или -->

    <div class="js-datepicker"></div>

    BasicDatepicker.init('.my-datepicker');
    BasicDatepicker.init(document.querySelector('.my-datepicker'));
    BasicDatepicker.init(document.querySelectorAll('.my-datepicker'));

    // или

    BasicDatepicker.init(); // по умолчанию инициaлизирует элементы с классом .js-datepicker

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

    BasicDatepicker.init(document.querySelector('.my-datepicker'), {
        'isMobile': true,
        dateFormat(date) {
            return date.toLocaleString('ja', {
                year: 'numeric',
                day: '2-digit',
                month: 'long'
            });
        }
    });

Конфигурация #

data-datepicker-options #

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

    <input class="js-datepicker" data-datepicker-options='{"isMobile": true}' type="text" readonly placeholder="Выберите дату">

Методы #

Являются обёртками над методами Air datepicker.

show #

Показывает календарь.

    BasicDatepicker.methods(document.querySelector('.my-datepicker'), {
        name: "show"
    });

hide #

Скрывает календарь.

    BasicDatepicker.methods(document.querySelector('.my-datepicker'), {
        name: "hide"
    });

next #

Переход к следующему месяцу/году/декаде.

    BasicDatepicker.methods(document.querySelector('.my-datepicker'), {
        name: "next"
    });

prev #

Переход к прошлому месяцу/году/декаде.

    BasicDatepicker.methods(document.querySelector('.my-datepicker'), {
        name: "prev"
    });

selectDate #

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

где в конфигурациях указывается:

    BasicDatepicker.methods(document.querySelector('.my-datepicker'), {
        name: "selectDate",
        config: {
            date: new Date(),
            options: {
                updateTime: true,
                silent: true
            }
        }
    });

unselectDate #

Снимает выбор с переданной даты.

    BasicDatepicker.methods(document.querySelector('.my-datepicker'), {
        name: "unselectDate",
        config: {
            date: new Date()
        }
    });

clear #

Очищает все выбранные даты.

    BasicDatepicker.methods(document.querySelector('.my-datepicker'), {
        name: "clear"
    });

destroy #

Уничтожает экземпляр календаря. Удаляет себя из DOM дерева и все события с целевого элемента.

    BasicDatepicker.methods(document.querySelector('.my-datepicker'), {
        name: "destroy"
    });

update #

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

    BasicDatepicker.methods(document.querySelector('.my-datepicker'), {
        name: "update",
        config: {
            options: {
                "isMobile": true
            }
        }
    });

setCurrentView #

Устанавливает новое значение представления календаря.

    BasicDatepicker.methods(document.querySelector('.my-datepicker'), {
        name: "setCurrentView",
        config: {
            view: "months"
        }
    });

setViewDate #

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

    BasicDatepicker.methods(document.querySelector('.my-datepicker'), {
        name: "setViewDate",
        config: {
            date: new Date()
        }
    });

setFocusDate #

Устанавливает фокус на ячейку с переданной датой.

    BasicDatepicker.methods(document.querySelector('.my-datepicker'), {
        name: "setFocusDate",
        config: {
            date: new Date(),
            viewDateTransition: true
        }
    });

up #

Переход к следующему типу отображению(дни, месяцы, годы). Варианты отображения идут по порядку от days -> months -> years.

    BasicDatepicker.methods(document.querySelector('.my-datepicker'), {
        name: "up",
        config: {
            date: new Date()
        }
    });

down #

Переход к предыдущему типу отображения(дни, месяцы, годы).

    BasicDatepicker.methods(document.querySelector('.my-datepicker'), {
        name: "down",
        config: {
            date: new Date()
        }
    });

События #

Являются обёртками над событиями Air Datepicker.

    BasicDatepicker.on(document.querySelector('.my-datepicker'), {
        'name': 'onSelect',
        'listener': function ({date, formattedDate, datepicker}) {

            console.log(date);

        }
    });

Cписок событий: