Вступление #

Для работы календаря можно использовать класс .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)
	},
})

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