Air Datepicker

Установка

bower i --save air-datepicker

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

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

Календарь автоматически проинициализируется на элементах с классом.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=", " />

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

Проинициализируйте плагин на элементе, который не является текстовым полем, например на<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

Значение по умполчанию: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- последний год декады, в которую входит текущий год

toggleSelected

Тип:boolean

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

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

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

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

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

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, yyyy',
	months: 'yyyy',
	years: 'yyyy1 - yyyy2'
};

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

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

События

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

AIR DATEPICKERлегкий соврменный jQuery календарь

Установка

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

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

Примеры

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

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

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

Выбор месяца

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

Диапозон дат

Локализация

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

Опции

События

Пример