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

Значение по умполчанию: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, <i>yyyy</i>',
	months: 'yyyy',
	years: 'yyyy1 - yyyy2'
};

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

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

monthsField

Тип:string

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

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

События

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
			}
		}
	}
})

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()

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

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