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

Установка

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, то клик на выделенной дате снимет выделение.