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

Описание

Легкий (~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();