mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
138 lines
40 KiB
HTML
138 lines
40 KiB
HTML
<!DOCTYPE html><html><head><title>Air Datepicker</title><meta charset="UTF-8"><link href="css/style.css" rel="stylesheet" type="text/css"><link href="css/github-gist.css" rel="stylesheet" type="text/css"><link href="../dist/css/datepicker.min.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,300,500&subset=latin,cyrillic" rel="stylesheet" type="text/css"><script src="../bower_components/jquery/dist/jquery.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script><script src="../dist/js/datepicker.js"></script><script src="../dist/js/i18n/datepicker.en.js"></script></head><body><div class="wrapper"><main role="main" class="main"><div class="container"><h1 class="promo-header">AIR DATEPICKER<span>легкий кроссбраузерный jQuery календарь</span></h1><p class="-text-center-"><div class="datepicker-here datepicker-promo"></div><script>var $promo = $('.datepicker-promo');
|
||
|
||
$promo.datepicker()
|
||
|
||
</script></p><article><h2 id="intro">Описание</h2><p>Легкий (<strong>~20kb</strong> минифицированный js файл и <strong>~5.5kb</strong> gziped) кроссбраузерный календарь, написан с использованием<span class="example-inline"><code>es5</code></span>и<span class="example-inline"><code class="js">css flexbox</code></span>. Работает во всех современных браузерах:
|
||
<strong>IE 10+</strong>, <strong>Chrome</strong>, <strong>Firefox</strong>, <strong>Safari 8+</strong>, <strong>Opera 17+</strong>.</p></article><article><h2 id="install">Установка</h2><pre class="example-code"><code class="html">bower i --save air-datepicker</code></pre><p>Либо можно скачать файлы напрямую с <a href="">GitHub</a></p></article><article><h2 id="usage">Использование</h2><p>Подключите стили и скрипты из папки<span class="example-inline"><code>/dist</code></span>:</p><pre class="example-code"><code class="html"><html>
|
||
<head>
|
||
<link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
|
||
<script src="dist/js/datepicker.min.js"></script>
|
||
</head>
|
||
</html></code></pre><p>Календарь автоматически проинициализируется на элементах с классом<span class="example-inline"><code class="css">.datepicker-here</code></span>, при этом опции можно передать через<span class="example-inline"><code class="html">data</code></span>атрибуты.</p><pre class="example-code"><code class="html"><input type='text' class="datepicker-here" data-position="right top" /></code></pre><h3>Ручная инициализация</h3><pre class="example-code"><code class="js">// Инициализация
|
||
$('#my-element').datepicker([options])
|
||
|
||
// Доступ к экземпляру объекта
|
||
$('#my-element').data('datepicker')
|
||
</code></pre></article><article><h2 id="examples">Примеры</h2><h3>Инициализация с опциями по умолчанию</h3><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" class="datepicker-here"></div><pre class="example-code"><code class="html"><input type='text' class='datepicker-here' />
|
||
</code></pre></div><h3>Выбор нескольких дат</h3><p>Передайте параметр<span class="example-inline"><code class="js">{multipleDates: true}</code></span>для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число<span class="example-inline"><code class="js">{multipleDates: 3}</code></span>.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" data-multiple-dates="3" data-multiple-dates-separator=", " data-position="top left" class="datepicker-here"></div><pre class="example-code"><code class="html"><input type="text"
|
||
class="datepicker-here"
|
||
data-multiple-dates="3"
|
||
data-multiple-dates-separator=", "
|
||
data-position='right top'/>
|
||
</code></pre></div><h3>Постоянно видимый календарь</h3><p>Проинициализируйте плагин на элементе, который не является текстовым полем, например на<span class="example-inline"><code class="html"><div> … </div></code></span>, либо передайте параметр<span class="example-inline"><code class="js">{inline: true}</code></span>.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><div class="datepicker-here"></div></div><pre class="example-code"><code class="html"><div class="datepicker-here"></div>
|
||
</code></pre></div><h3>Выбор месяца</h3><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" data-min-view="months" data-view="months" data-date-format="MM yyyy" class="datepicker-here"></div><pre class="example-code"><code class="html"><input type="text"
|
||
class="datepicker-here"
|
||
data-min-view="months"
|
||
data-view="months"
|
||
data-date-format="MM yyyy" />
|
||
</code></pre></div><h3>Минимальная и максимальные даты</h3><p>Чтобы ограничить выбор даты, используйте<span class="example-inline"><code class="js">minDate</code></span>и<span class="example-inline"><code class="js">maxDate</code></span>, которым нужно передать объект даты.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><input id="minMaxExample" type="text"><script>$('#minMaxExample').datepicker({
|
||
minDate: new Date() // Можно выбрать тольо даты, идущие за сегодняшним днем
|
||
})</script></div><pre class="example-code"><code class="js">$('#minMaxExample').datepicker({
|
||
minDate: new Date() // Можно выбрать тольо даты, идущие за сегодняшним днем
|
||
})
|
||
</code></pre></div><h3>Диапозон дат</h3><p>По умолчанию в плагине нет встроенного механизма выбора диапозона дат для нескольких текстовых полей.
|
||
Тем не менее это можно сделть вручную.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><div class="range-example"><input type="text" placeholder="Начало" id="start"><span>–</span><input type="text" placeholder="Конец" id="end"></div><script>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)
|
||
}
|
||
})
|
||
</script></div><pre class="example-code"><code class="js">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)
|
||
}
|
||
})
|
||
</code></pre></div></article><article><h2 id="localization">Локализация</h2><p>Вы можете добавить свою локализацию в объект<span class="example-inline"><code class="js">Datepicker.language["my-lang"]</code></span>и при вызове календаря передать название языка в параметр<span class="example-inline"><code class="js">language</code></span></p><pre class="example-code"><code class="js">Datepicker.language['my-lang'] = {...}
|
||
|
||
$('.my-datepicker').datepicker({
|
||
language: 'my-lang'
|
||
})
|
||
</code></pre><p>Также объект локализации можно передавать непосредственно в<span class="example-inline"><code class="js">language</code></span></p><pre class="example-code"><code class="js">$('.my-datepicker').datepicker({
|
||
language: {
|
||
days: [...]
|
||
...
|
||
}
|
||
})
|
||
</code></pre><p>Если в вашей локализации не будет хватать каких-то полей, то они будут взяты из языка по умолчанию.</p><h3>Пример объекта локализации</h3><pre class="example-code"><code class="js">Datepicker.language['ru'] = {
|
||
days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
|
||
daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
|
||
daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
|
||
months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
|
||
monthsShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
|
||
today: 'Сегодня',
|
||
clear: 'Очистить',
|
||
dateFormat: 'dd.mm.yyyy',
|
||
firstDay: 1
|
||
};
|
||
</code></pre></article><article><h2 id="options">Опции</h2><div class="param"><header class="param-header"><h3>inline</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">false</code></span></p></header><p>Если true, то календарь будет виден постоянно.</p></div><div class="param"><header class="param-header"><h3>language</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">string|object</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">"ru"</code></span></p></header><p>Язык календаря. Если передается строка, то поиск языка будет осуществляться в объекте<span class="example-inline"><code class="js">Datepicker.language</code></span>Если передан объект, то данные будут браться из него.</p><p>Если в объекте локализации не будет хватать каких то полей, то они будут взяты из языка по умолчанию.</p></div><div class="param"><header class="param-header"><h3>startDate</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">Date</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">new Date()</code></span></p></header><p>Какую дату нужно показывать при инициализации календаря.</p></div><div class="param"><header class="param-header"><h3>firstDay</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">""</code></span></p></header><p>Индекс дня, с которого начинается неделя. Возможные значение от 0 до 6, где 0 - воскресенье и 6 - суббота.
|
||
По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет.
|
||
</p></div><div class="param"><header class="param-header"><h3>weekends</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">array</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">[6, 0]</code></span></p></header><p>Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс<span class="example-inline"><code class="css">.-weekend-</code></span>. По умолчанию это суббота и воскресенье.</p></div><div class="param"><header class="param-header"><h3>dateFormat</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">""</code></span></p></header><p>Формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет.</p><ul><li><span class="param-inline"><strong>d</strong></span>- дата</li><li><span class="param-inline"><strong>dd</strong></span>- дата с лидирующем нулем</li><li><span class="param-inline"><strong>D</strong></span>- сокращенное наименование дня</li><li><span class="param-inline"><strong>DD</strong></span>- полное наименование дня</li><li><span class="param-inline"><strong>m</strong></span>- номер мясяца</li><li><span class="param-inline"><strong>mm</strong></span>- номер месяца с лидирующем нулем</li><li><span class="param-inline"><strong>M</strong></span>- сокращенное наименовение месяца</li><li><span class="param-inline"><strong>MM</strong></span>- полное наименовение месяца</li><li><span class="param-inline"><strong>yy</strong></span>- сокращенный номер года</li><li><span class="param-inline"><strong>yyyy</strong></span>- полный номер года</li><li><span class="param-inline"><strong>yyyy1</strong></span>- первый год декады, в которую входит текущий год</li><li><span class="param-inline"><strong>yyyy2</strong></span>- последний год декады, в которую входит текущий год</li></ul></div><div class="param"><header class="param-header"><h3>toggleSelected</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">true</code></span></p></header><p>Если true, то клик на выделенной дате снимет выделение.</p></div><div class="param"><header class="param-header"><h3>position</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">"bottom left"</code></span></p></header><p>Позиционирование календаря отностиельно текстового поля. Первым значением задается основная ось позиционирования,
|
||
воторым - положение на этой оси. Например<span class="example-inline"><code class="js">{position: "right top"}</code></span>- утсановит позицию клаендаря справа вверху от текстового поля.</p></div><div class="param"><header class="param-header"><h3>offset</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">12</code></span></p></header><p>Отступ от основной оси позиционирования.</p></div><div class="param"><header class="param-header"><h3>view</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">"days"</code></span></p></header><p>Начальный вид календаря. Возможноые значения:<ul><li><span class="example-inline"><code class="js">days</code></span>- отображение дней месяца</li><li><span class="example-inline"><code class="js">months</code></span>- отображение месяцев одного года</li><li><span class="example-inline"><code class="js">years</code></span>- отображение годов одной декады</li></ul></p></div><div class="param"><header class="param-header"><h3>minView</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">"days"</code></span></p></header><p>Минимальное представление календаря, по наступлению которого, выбор ячейки приведет к ее активации, а не переходу к следующему виду.
|
||
Возможные значения такие же как и у параметра<span class="example-inline"><code>view</code></span>.</p></div><div class="param"><header class="param-header"><h3>showOtherMonths</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">true</code></span></p></header><p>Если true, то будут отображаться дни других месяцев.</p></div><div class="param"><header class="param-header"><h3>selectOtherMonths</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">true</code></span></p></header><p>Если true, то можно будет выбрать дни из других месяцев.</p></div><div class="param"><header class="param-header"><h3>moveToOtherMonthsOnSelect</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">true</code></span></p></header><p>Если true, то при выборе дней из других месяца, будет осуществялться переход к этому месяцу.</p></div><div class="param"><header class="param-header"><h3>showOtherYears</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">true</code></span></p></header><p>Если true, то при отображении декады, будут показаны годы из других декад.</p></div><div class="param"><header class="param-header"><h3>selectOtherYears</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">true</code></span></p></header><p>Если true, то можно будет выбрать года из других декад</p></div><div class="param"><header class="param-header"><h3>moveToOtherYearsOnSelect</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">true</code></span></p></header><p>Если true, то при выборе года из другой декады, будет осуществлен переход к этой декаде.</p></div><div class="param"><header class="param-header"><h3>minDate</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">Date</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">""</code></span></p></header><p>Минимальная дата для возможности выбора. Все даты, идущее до нее нельзя будет активировать.</p></div><div class="param"><header class="param-header"><h3>maxDate</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">Date</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">""</code></span></p></header><p>Максимальная дата для возможности выбора. Все даты, идущее после нее нельзя будет выбрать.</p></div><div class="param"><header class="param-header"><h3>disableNavWhenOutOfRange</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">true</code></span></p></header><p>Если true, то при наступлении даты, которая была бы меньше минимально возможной или больше максимально возможной, деактвировались бы кнопки навигации 'вперед', 'назад'</p></div><div class="param"><header class="param-header"><h3>multipleDates</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">boolean|number</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">false</code></span></p></header><p>Если true, то можно будет выбрать неограниченное количество дат. Если передать число, то количество выбираемых дат будет ограниченно этим числом.</p></div><div class="param"><header class="param-header"><h3>multipleDatesSeparator</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">","</code></span></p></header><p>Разделитель дат, который будет вставлен между датами при объеденения нескольких дат в одну строку.</p></div><div class="param"><header class="param-header"><h3>todayButton</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">false</code></span></p></header><p>Если true, то будет отображена кнопка "Сегодня".</p></div><div class="param"><header class="param-header"><h3>clearButton</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">false</code></span></p></header><p>Если true, то будет отображена кнопка "Очистить".</p></div><div class="param"><header class="param-header"><h3>showEvent</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">"focus"</code></span></p></header><p>Тип события, по наступлению которого будет показан календарь.</p></div><div class="param"><header class="param-header"><h3>autoClose</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">false</code></span></p></header><p>Если true, то при активации даты, календарь закроется.</p></div><div class="param"><header class="param-header"><h3>prevHtml</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js"><svg><path d="M 17,12 l -5,5 l 5,5"></path></svg></code></span></p></header><p>Контент кнопки 'предыдущий месяц|год|декада'.</p></div><div class="param"><header class="param-header"><h3>nextHtml</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js"><svg><path d="M 14,12 l 5,5 l -5,5"></path></svg></code></span></p></header><p>Контент кнопки 'следующий месяц|год|декада'.</p></div><div class="param"><header class="param-header"><h3>navTitles</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">object</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><pre class="example-code"><code class="js">navTitles = {
|
||
days: 'MM, <i>yyyy</i>',
|
||
months: 'yyyy',
|
||
years: 'yyyy1 - yyyy2'
|
||
};</code></pre></p></header><p>Значение заголовка календаря в зависимости от текущего вида, можно использовать те же обозночения что и в<span class="example-inline"><code class="js">dateFormat</code></span>. Недостающие поля будут взяты из значения по умолчанию. Также можно использовать html теги.</p><pre class="example-code"><code class="js">$('#my-datepicker').datepicker({
|
||
navTitles: {
|
||
days: '<h3>Выберете дату заезда</h3> MM, yyyy'
|
||
}
|
||
})</code></pre></div><div class="param"><header class="param-header"><h3>monthsField</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">"monthsShort"</code></span></p></header><p>Какое поле из объекта локализации использовать в качестве названий месяцев, когда каледнарь отображает год.</p></div></article><article><h2 id="events">События</h2><div class="param"><header class="param-header"><h3>onSelect(formattedDate, date, inst)</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Функция обратного вызова при выборе даты.</p><ul><li><span class="param-inline"><strong>formattedDate</strong><i>string</i></span>- отформатированная дата.</li><li><span class="param-inline"><strong>date</strong><i>Date|array</i></span>- объект<span class="example-inline"><code class="js">Date</code></span>выбранной даты, если<span class="example-inline"><code class="js">{multipleDates: true}</code></span>, то будет передан массив таких объектов.</li><li><span class="param-inline"><strong>inst</strong><i>object</i></span>- экземпляр плагина.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeMonth(month, year)</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Функция обратного вызова при изменении месяца.</p><ul><li><span class="param-inline"><strong>month</strong><i>number</i></span>- номер месяца (от 0 до 12), к которому осуществлен переход.</li><li><span class="param-inline"><strong>year</strong><i>number</i></span>- номер года, к которому осуществлен переход.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeYear(year)</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Функция обратного вызова при изменении года.</p><ul><li><span class="param-inline"><strong>year</strong><i>number</i></span>- номер года, к которому осуществлен переход</li></ul></div><div class="param"><header class="param-header"><h3>onChangeDecade(decade)</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Функция обратного вызова при изменении декады.</p><ul><li><span class="param-inline"><strong>decade</strong><i>array</i></span>- массив, состоящий из номера года с которого начинается декада, и года на котором она заканчивается.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeView(view)</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Функция обратного вызова при изменении вида календаря</p><ul><li><span class="param-inline"><strong>view</strong><i>string</i></span>- вид, к которому осуществлен переход (days, months, years).</li></ul></div><div class="param"><header class="param-header"><h3>onRenderCell(date, cellType)</h3><p class="param-header--row"><span class="param-header--label">Тип:</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умполчанию:</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Функция обратного вызова при отрисовке ячейки календаря.</p><ul><li><span class="param-inline"><strong>date</strong><i>Date</i></span>- объект даты текущей ячейки</li><li><span class="param-inline"><strong>cellType</strong><i>string</i></span>- тип текущей ячейки (day, month, year).</li></ul><p>Функция должна возвращать объект, которой может состоять из трех полей:</p><pre class="example-code"><code class="js">{
|
||
html: '', // Кастомный контент ячейки
|
||
classes: '', // Дополнительные классы для ячейки
|
||
disabled: '' // true/false, если true, то ячейку нельзя будет выбрать
|
||
}</code></pre><h4>Пример</h4><pre class="example-code"><code class="js">$('#my-datepicker').datepicker({
|
||
// Передаем функцию, которая добавляет 4 числу каждого месяца класс 'my-class'
|
||
// и делает их невозможными к выбору.
|
||
onRenderCell: function(date, cellType) {
|
||
if (cellType == 'day' && date.getDate() == 4) {
|
||
return {
|
||
classes: 'my-class',
|
||
disabled: true
|
||
}
|
||
}
|
||
}
|
||
})
|
||
</code></pre></div></article><article><h2 id="api">API</h2><p>Досутп к экземпляру плагина осуществляется через<span class="example-inline"><code>data</code></span>атрибут.</p><pre class="example-code"><code class="js">var myDatepicker = $('#my-elem').datepicker().data('datepicker');
|
||
|
||
myDatepicker.show();
|
||
</code></pre><div class="param"><header class="param-header"><h3>show()</h3></header><p>Показывает календарь.</p></div><div class="param"><header class="param-header"><h3>hide()</h3></header><p>Скрывает календарь.</p></div><div class="param"><header class="param-header"><h3>next()</h3></header><p>Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years.</p></div><div class="param"><header class="param-header"><h3>prev()</h3></header><p>Переходит на предыдщуий месяц если вид days, на предыдущий год если months, и предыдущую декаду если years.</p></div><div class="param"><header class="param-header"><h3>selectDate(date)</h3></header><ul><li><span class="param-inline"><strong>date</strong><i>Date</i></span>- дата в формате JavaScript<span class="example-inline"><code class="js">Date()</code></span></li></ul><p>Выбирает переданную дату. Если<span class="example-inline"><code class="js">{multipleDates: false}</code></span>и уже есть активная дата, то она будет деактивирована. Если<span class="example-inline"><code class="js">{multipleDates: true}</code></span>то будет добавлена еще одна активная дата.</p></div><div class="param"><header class="param-header"><h3>removeDate(date)</h3></header><ul><li><span class="param-inline"><strong>date</strong><i>Date</i></span>- дата в формате JavaScript<span class="example-inline"><code class="js">Date()</code></span></li></ul><p>Снимает выделение с переданной даты.</p></div><div class="param"><header class="param-header"><h3>update(field[, value])</h3></header><ul><li><span class="param-inline"><strong>field</strong><i>string|object</i></span>- название поля значение которого нужно обновить.</li><li><span class="param-inline"><strong>field</strong><i>string|*</i></span>- новое значение параметра</li></ul><p>Обновление опций календаря, после вызова метода он автоматически перерисуется.
|
||
Можно обновлять сразу же несколько параметров, для этого нужно передать объект с требуемыми полями.
|
||
</p><pre class="example-code"><code class="js">var datepicker = $('#my-elem').datepicker().data('datepicker');
|
||
|
||
// Обновление одного параметра
|
||
datepicker.update('minDate', new Date())
|
||
|
||
// Обновление нескольких параметров
|
||
datepicker.update({
|
||
position: "top right",
|
||
maxDate: new Date(),
|
||
todayButton: true
|
||
})
|
||
</code></pre></div><div class="param"><header class="param-header"><h3>view</h3></header><p>Устанавливает новое представление для календаря.</p><pre class="example-code"><code class="js">datepicker.view = 'months';
|
||
</code></pre></div><div class="param"><header class="param-header"><h3>date</h3></header><p>Устанавливает новую отображаемую дату, нужно передать JavaScript<span class="example-inline"><code>Date()</code></span></p><pre class="example-code"><code class="js">datepicker.date = new Date();</code></pre></div></article></div></main></div><script src="js/navigation.js"></script><script>var $code = $('code');
|
||
$code.each(function (i, el) {
|
||
hljs.highlightBlock(el);
|
||
})
|
||
|
||
navigation.init();</script></body></html> |