Air Datepicker

Описание

Легкий (~20kb минифицированный js файл и ~5.5kb 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() // Можно выбрать тольо даты, идущие за сегодняшним днем
})

Диапозон дат

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

Пример

–

var $start = $('#start'),
	$end = $('#end');

	$start.datepicker({
		onSelect: function (fd, date) {
			$end.data('datepicker')
				.update('minDate', date)
		}
	})

	$end.datepicker({
		onSelect: function (fd, date) {
			$start.data('datepicker')
				.update('maxDate', date)
		}
	})

Локализация

Вы можете добавить свою локализацию в объект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
};

Опции

inline

Типboolean

Defaultsfalse

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

language

Типstring|object

Defaults"ru"

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

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

startDate

ТипDate

Defaultsnew Date()

Какую дату нужно показывать при инициализации календаря.

firstDay

Типnumber

Defaults""

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

weekends

Типarray

Defaults[6, 0]

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

dateFormat

Типstring

Defaults""

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

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

toggleSelected

Типboolean

Defaultstrue

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

position

Типstring

Defaults"bottom left"

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

offset

Типnumber

Defaults12

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

view

Типstring

Defaults"days"

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

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

minView

Типstring

Defaults"days"

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

showOtherMonths

Типboolean

Defaultstrue

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

selectOtherMonths

Типboolean

Defaultstrue

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

moveToOtherMonthsOnSelect

Типboolean

Defaultstrue

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

showOtherYears

Типboolean

Defaultstrue

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

selectOtherYears

Типboolean

Defaultstrue

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

moveToOtherYearsOnSelect

Типboolean

Defaultstrue

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

minDate

ТипDate

Defaults""

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

maxDate

ТипDate

Defaults""

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

disableNavWhenOutOfRange

Типboolean

Defaultstrue

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

multipleDates

Типboolean|number

Defaultsfalse

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

multipleDatesSeparator

Типstring

Defaults","

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

todayButton

Типboolean

Defaultsfalse

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

clearButton

Типboolean

Defaultsfalse

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

showEvent

Типstring

Defaults"focus"

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

autoClose

Типboolean

Defaultsfalse

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

prevHtml

Типstring

Defaults<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>

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

nextHtml

Типstring

Defaults<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>

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

navTitles

Типobject

Defaults

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

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

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

monthsField

Типstring

Defaults"monthsShort"

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

События

onSelect(formattedDate, date, inst)

Типfunction

Defaultsnull

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

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

onChangeMonth(month, year)

Типfunction

Defaultsnull

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

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

onChangeYear(year)

Типfunction

Defaultsnull

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

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

onChangeDecade(decade)

Типfunction

Defaultsnull

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

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

onChangeView(view)

Типfunction

Defaultsnull

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

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

onRenderCell(date, cellType)

Типfunction

Defaultsnull

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

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