Air Datepicker

Описание

Легкий (~26kb минифицированный js файл и ~7kb gziped), кастомизируемый, кроссбраузерный календарь, написан с использованиемes5иcss flexbox. Работает во всех современных браузерах: IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.

Установка

bower i --save air-datepicker

Либо можно скачать файлы напрямую с GitHub

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

Подключите стили и скрипты из папки/dist:

<html>
	<head>
		<link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
		<script src="dist/js/datepicker.min.js"></script>
	</head>
</html>

Календарь автоматически проинициализируется на элементах с классом.datepicker-here, при этом опции можно передать черезdataатрибуты.

<input type='text' class="datepicker-here" data-position="right top" />

Ручная инициализация

// Инициализация
$('#my-element').datepicker([options])

// Доступ к экземпляру объекта
$('#my-element').data('datepicker')

Примеры

Инициализация с опциями по умолчанию

Пример

<input type='text' class='datepicker-here' />

Выбор нескольких дат

Передайте параметр{multipleDates: true}для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число{multipleDates: 3}.

Пример

<input type="text"
	class="datepicker-here"
	data-multiple-dates="3"
	data-multiple-dates-separator=", "
	data-position='right top'/>

Постоянно видимый календарь

Проинициализируйте плагин на элементе, который не является текстовым полем, например на<div> … </div>, либо передайте параметр{inline: true}.

Пример

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

Выбор месяца

Пример

<input type="text"
	class="datepicker-here"
	data-min-view="months"
	data-view="months"
	data-date-format="MM yyyy" />

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

Чтобы ограничить выбор даты, используйтеminDateиmaxDate, которым нужно передать объект даты.

Пример

$('#minMaxExample').datepicker({
	// Можно выбрать тольо даты, идущие за сегодняшним днем, включая сегодня
	minDate: new Date()
})

Диапозон дат

Используйте парамтер{range: true}для выбора диапазона. В качестве разделителя дат будет использованmultipleDatesSeparator

Пример

<input type="text" data-range="true" data-multiple-dates-separator=" - " class="datepicker-here"/>

Неактивные дни недели

Для того, чтобы сделать невозмножным выбрать конкретные дни недели, можно воспользоваться методомonRenderCell.

Пример

// Сделаем неактивными воскресенье и субботу
var disabledDays = [0, 6];

$('#disabled-days').datepicker({
	onRenderCell: function (date, cellType) {
		if (cellType == 'day') {
			var day = date.getDay(),
				isDisabled = disabledDays.indexOf(day) != -1;

			return {
				disabled: isDisabled
			}
		}
	}
})

Кастомное содержимое ячеек

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

Пример

var eventDates = [1, 10, 12, 22],
	$picker = $('#custom-cells'),
	$content = $('#custom-cells-events'),
	sentences = [ … ];

$picker.datepicker({
	onRenderCell: function (date, cellType) {
		var currentDate = date.getDate();

		// Добавляем вспомогательный элемент, если число содержится в `eventDates`
		if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
			return {
				html: currentDate + '<span class="dp-note"></span>'
			}
		}
	},
	onSelect: function onSelect(fd, date) {
		var title = '', content = ''

		// Если выбрана дата с событием, то отображаем его
		if (date && eventDates.indexOf(date.getDate()) != -1) {
			title = fd;
			content = sentences[Math.floor(Math.random() * eventDates.length)];
		}

		$('strong', $content).html(title)
		$('p', $content).html(content)
	}
})

// Сразу выберем какую-ниудь дату из `eventDates`
var currentDate = currentDate = new Date();
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))

Локализация

Вы можете добавить свою локализацию в объектDatepicker.language["my-lang"]и при вызове календаря передать название языка в параметрlanguage

Datepicker.language['my-lang'] = {...}

$('.my-datepicker').datepicker({
	language: 'my-lang'
})

Также объект локализации можно передавать непосредственно вlanguage

$('.my-datepicker').datepicker({
	language: {
		days: [...]
		...
	}
})

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

Пример объекта локализации

Datepicker.language['ru'] =  {
	days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
	daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
	daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
	months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
	monthsShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
	today: 'Сегодня',
	clear: 'Очистить',
	dateFormat: 'dd.mm.yyyy',
	firstDay: 1
};

Опции

classes

Типstring

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

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

inline

Типboolean

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

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

language

Типstring|object

Значение по умолчанию"ru"

Язык календаря. Если передается строка, то поиск языка будет осуществляться в объектеDatepicker.languageЕсли передан объект, то данные будут браться из него.

Если в объекте локализации не будет хватать каких то полей, то они будут взяты из языка по умолчанию.

startDate

ТипDate

Значение по умолчаниюnew Date()

Дата, которая будет отображаться при инициализации календаря.

firstDay

Типnumber

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

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

weekends

Типarray

Значение по умолчанию[6, 0]

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

dateFormat

Типstring

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

Желаемый формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет.

@- время в миллесекундах
d- дата
dd- дата с лидирующем нулем
D- сокращенное наименование дня
DD- полное наименование дня
m- номер мясяца
mm- номер месяца с лидирующем нулем
M- сокращенное наименовение месяца
MM- полное наименовение месяца
yy- сокращенный номер года
yyyy- полный номер года
yyyy1- первый год декады, в которую входит текущий год
yyyy2- последний год декады, в которую входит текущий год

altField

Типstring|jQuery

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

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

altFieldDateFormat

Типstring

Значение по умолчанию"@"

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

toggleSelected

Типboolean

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

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

keyboardNav

Типboolean

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

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

Сочетания клавиш:

Ctrl + → | ↑- переход на месяц вперед
Ctrl + ← | ↓- переход на месяц назад
Shift + → | ↑- переход на год вперед
Shift + ← | ↓- переход на год назад
Alt + → | ↑- переход на 10 лет вперед
Alt + ← | ↓- переход на 10 лет назад
Ctrl + Shift + ↑- переход на следующий вид
Esc- закрывает календарь

position

Типstring

Значение по умолчанию"bottom left"

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

offset

Типnumber

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

Отступ от основной оси позиционирования.

view

Типstring

Значение по умолчанию"days"

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

days- отображение дней месяца
months- отображение месяцев одного года
years- отображение годов одной декады

minView

Типstring

Значение по умолчанию"days"

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

showOtherMonths

Типboolean

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

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

selectOtherMonths

Типboolean

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

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

moveToOtherMonthsOnSelect

Типboolean

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

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

showOtherYears

Типboolean

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

Если true, то при отображении декады, будут показаны годы из других декад.

selectOtherYears

Типboolean

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

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

moveToOtherYearsOnSelect

Типboolean

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

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

minDate

ТипDate

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

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

maxDate

ТипDate

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

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

disableNavWhenOutOfRange

Типboolean

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

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

multipleDates

Типboolean|number

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

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

multipleDatesSeparator

Типstring

Значение по умолчанию","

Разделитель дат, который будет использован при объеденения нескольких дат в одну строку.

range

Типboolean

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

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

todayButton

Типboolean

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

Если true, то будет отображена кнопка "Сегодня".

clearButton

Типboolean

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

Если true, то будет отображена кнопка "Очистить".

showEvent

Типstring

Значение по умолчанию"focus"

Тип события, по наступлению которого будет показан календарь.

autoClose

Типboolean

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

Если true, то при активации даты, календарь закроется.

prevHtml

Типstring

Значение по умолчанию<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>

Контент кнопки 'предыдущий месяц|год|декада'.

nextHtml

Типstring

Значение по умолчанию<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>

Контент кнопки 'следующий месяц|год|декада'.

navTitles

Типobject

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

navTitles = {
	days: 'MM, <i>yyyy</i>',
	months: 'yyyy',
	years: 'yyyy1 - yyyy2'
};

Значение заголовка календаря в зависимости от текущего вида, можно использовать те же обозначения что и вdateFormat. Недостающие поля будут взяты из значения по умолчанию. Также можно использовать html теги.

$('#my-datepicker').datepicker({
	navTitles: {
		days: '<h3>Выберете дату заезда</h3> MM, yyyy'
	}
})

monthsField

Типstring

Значение по умолчанию"monthsShort"

Какое поле из объекта локализации использовать в качестве названий месяцев, когдаview = "months".

События

onSelect(formattedDate, date, inst)

Типfunction

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

Функция обратного вызова при выборе даты.

formattedDatestring- отформатированная дата.
dateDate|array- объектDateвыбранной даты, если{multipleDates: true}, то будет передан массив таких объектов.
instobject- экземпляр плагина.

onChangeMonth(month, year)

Типfunction

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

Функция обратного вызова при изменении месяца.

monthnumber- номер месяца (от 0 до 12), к которому осуществлен переход.
yearnumber- номер года, к которому осуществлен переход.

onChangeYear(year)

Типfunction

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

Функция обратного вызова при изменении года.

yearnumber- номер года, к которому осуществлен переход

onChangeDecade(decade)

Типfunction

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

Функция обратного вызова при изменении декады.

decadearray- массив, состоящий из номера года с которого начинается декада, и года на котором она заканчивается.

onChangeView(view)

Типfunction

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

Функция обратного вызова при изменении вида календаря

viewstring- вид, к которому осуществлен переход (days, months, years).

onRenderCell(date, cellType)

Типfunction

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

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

dateDate- объект даты текущей ячейки
cellTypestring- тип текущей ячейки (day, month, year).

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

{
	html: '', // Кастомный контент ячейки
	classes: '', // Дополнительные классы для ячейки
	disabled: '' // true/false, если true, то ячейку нельзя будет выбрать
}

Пример

$('#my-datepicker').datepicker({
	// Передаем функцию, которая добавляет 11 числу каждого месяца класс 'my-class'
	// и делает их невозможными к выбору.
	onRenderCell: function(date, cellType) {
		if (cellType == 'day' && date.getDate() == 11) {
			return {
				classes: 'my-class',
				disabled: true
			}
		}
	}
})

API

Досутп к экземпляру плагина осуществляется черезdataатрибут.

var myDatepicker = $('#my-elem').datepicker().data('datepicker');

myDatepicker.show();

show()

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

hide()

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

next()

Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years.

prev()

Переходит на предыдщуий месяц если вид days, на предыдущий год если months, и предыдущую декаду если years.

selectDate(date)

dateDate- дата в формате JavaScriptDate()

Выбирает переданную дату. Если{multipleDates: false}и уже есть активная дата, то она будет деактивирована. Если{multipleDates: true}то будет добавлена еще одна активная дата.

removeDate(date)

dateDate- дата в формате JavaScriptDate()

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

clear()

Убирает выделение со всех активных дат.

update(field[, value])

fieldstring|object- название поля значение которого нужно обновить.
fieldstring|*- новое значение параметра

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

var datepicker = $('#my-elem').datepicker().data('datepicker');

// Обновление одного параметра
datepicker.update('minDate', new Date())

// Обновление нескольких параметров
datepicker.update({
	position: "top right",
	maxDate: new Date(),
	todayButton: true
})

view

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

datepicker.view = 'months';

date

Устанавливает новую отображаемую дату, нужно передать JavaScriptDate()

datepicker.date = new Date();

AIR DATEPICKERлегкий кроссбраузерный jQuery календарь

Описание

Установка

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

Ручная инициализация

Примеры

Инициализация с опциями по умолчанию

Выбор нескольких дат

Постоянно видимый календарь

Выбор месяца

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

Диапозон дат

Неактивные дни недели

Кастомное содержимое ячеек

Локализация

Пример объекта локализации

Опции

События

Пример

API