Вступление #

Для работы календаря можно использовать класс .js-datepicker по умолчанию.

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

Установка #

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

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

    <!-- или -->

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

	// настройки Air datepicker(https://air-datepicker.com/ru/docs)
	const options = {
		isMobile: true,
		dateFormat(date) {
			return date.toLocaleString('ja', {
				year: 'numeric',
				day: '2-digit',
				month: 'long',
			});
		}
	};

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

    // или

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

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

data-datepicker-options #

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

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

Методы #

Представляют собой оболочки для методов 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()
        }
    });

Экземпляр #

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

	const myCustomDatepicker = document.querySelector(".my-datepicker");

	console.log(myCustomDatepicker.BasicDatepicker); // пример экземпляра

События #

Представляют собой оболочки для событий Air Datepicker.

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

            console.log(date);

        }
    });

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