harper/whisper.cat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
16c479867c
whisper.cat/weboasis/stocks/assets/vendor/air-datepicker-master/docs/index-ru.html
[Harper Innes] f127b4fea8 whisper.cat stuff
2023-10-05 23:28:32 +11:00

339 lines
66 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html><html><head><title>Air Datepicker</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><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&amp;subset=latin,cyrillic" rel="stylesheet" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/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><script src="js/logger.js"></script></head><body><div class="wrapper"><main role="main" class="main"><div class="container"><div class="buttons"><a aria-label="Star t1m0n/air-datepicker on GitHub" data-count-aria-label="# stargazers on GitHub" data-count-api="/repos/t1m0n/air-datepicker#stargazers_count" data-count-href="/t1m0n/air-datepicker/stargazers" data-icon="octicon-star" href="https://github.com/t1m0n/air-datepicker" class="github-button">Star</a></div><a href="index.html" class="lang-link"><img src="img/en.png"><span>In English</span></a><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');
</script></p><article><h2 id="intro">Описание</h2><p>Легкий (<i><strong>~36kb</strong> минифицированный js файл и <strong>~9kb</strong> gziped</i>), кастомизируемый, кроссбраузерный календарь, написан с использованием<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="https://github.com/t1m0n/air-datepicker/tree/master/dist">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">&lt;html&gt;
&lt;head&gt;
&lt;link href=&quot;dist/css/datepicker.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
&lt;script src=&quot;dist/js/datepicker.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;/html&gt;</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">&lt;input type='text' class=&quot;datepicker-here&quot; data-position=&quot;right top&quot; /&gt;</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 id="example-default">Инициализация с опциями по умолчанию</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">&lt;input type='text' class='datepicker-here' /&gt;
</code></pre></div><h3 id="example-multiple">Выбор нескольких дат</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">&lt;input type=&quot;text&quot;
class=&quot;datepicker-here&quot;
data-multiple-dates=&quot;3&quot;
data-multiple-dates-separator=&quot;, &quot;
data-position='right top'/&gt;
</code></pre></div><h3 id="example-inline">Постоянно видимый календарь</h3><p>Проинициализируйте плагин на элементе, который не является текстовым полем, например на<span class="example-inline"><code class="html">&lt;div&gt; … &lt;/div&gt;</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">&lt;div class=&quot;datepicker-here&quot;&gt;&lt;/div&gt;
</code></pre></div><h3 id="example-months">Выбор месяца</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">&lt;input type=&quot;text&quot;
class=&quot;datepicker-here&quot;
data-min-view=&quot;months&quot;
data-view=&quot;months&quot;
data-date-format=&quot;MM yyyy&quot; /&gt;
</code></pre></div><h3 id="example-min-max">Минимальная и максимальные даты</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 id="example-range">Диапозон дат</h3><p>Используйте парамтер<span class="example-inline"><code>{range: true}</code></span>для выбора диапазона. В качестве разделителя дат будет использован<span class="example-inline"><code>multipleDatesSeparator</code></span></p><p>Для того, чтобы иметь возомжность выбрать одну и ту же дату, необходимо установить<span class="example-inline"><code>{toggleSelected: false}</code></span>.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" data-range="true" data-multiple-dates-separator=" - " class="datepicker-here"></div><pre class="example-code"><code class="html">&lt;input type=&quot;text&quot; data-range=&quot;true&quot; data-multiple-dates-separator=&quot; - &quot; class=&quot;datepicker-here&quot;/&gt;
</code></pre></div><h3 id="example-disabled-days">Неактивные дни недели</h3><p>Для того, чтобы сделать невозмножным выбрать конкретные дни недели, можно воспользоваться методом<span class="example-inline"><code>onRenderCell</code></span>.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" id="disabled-days"><script>var disabledDays = [0, 6]; // Сделаем неактивными субботу и воскресенье
$('#disabled-days').datepicker({
onRenderCell: function (date, cellType) {
if (cellType == 'day') {
var day = date.getDay(),
isDisabled = disabledDays.indexOf(day) != -1;
return {
disabled: isDisabled
}
}
}
})</script></div><pre class="example-code"><code class="js">// Сделаем неактивными воскресенье и субботу
var disabledDays = [0, 6];
$('#disabled-days').datepicker({
onRenderCell: function (date, cellType) {
if (cellType == 'day') {
var day = date.getDay(),
isDisabled = disabledDays.indexOf(day) != -1;
return {
disabled: isDisabled
}
}
}
})
</code></pre></div><h3 id="example-custom-content">Кастомное содержимое ячеек</h3><p>Air Datepicker позволяет менять содержимое ячеек как угодно. Для этого можно также воспользоваться методом<span class="example-inline"><code>onRenderCell</code></span>.
Давайте добавим вспомогательные элементы к нескольким датам и покажем случайный текст при выборе этих дат:</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><div class="list-inline"><div><div id="custom-cells"></div></div><div id="custom-cells-events"><strong></strong><p></p></div></div><script>var eventDates = [1, 10, 12, 22],
$picker = $('#custom-cells'),
$content = $('#custom-cells-events'),
sentences = [
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ita prorsus, inquam; Si enim ad populum me vocas, eum. Ita prorsus, inquam; Nonne igitur tibi videntur, inquit, mala? Hunc vos beatum; Idemne, quod iucunde? ',
'Ratio quidem vestra sic cogit. Illi enim inter se dissentiunt. Tu vero, inquam, ducas licet, si sequetur; Non semper, inquam; ',
'Duo Reges: constructio interrete. A mene tu? Ea possunt paria non esse. Est, ut dicis, inquam. Scaevolam M. Quid iudicant sensus? ',
'Poterat autem inpune; Qui est in parvis malis. Prave, nequiter, turpiter cenabat; Ita credo. '
]
$picker.datepicker({
onRenderCell: function (date, cellType) {
var currentDate = date.getDate();
if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
return {
html: currentDate + '<span class="dp-note"></span>'
}
}
},
onSelect: function onSelect(fd, date) {
var title = '', content = ''
if (date && eventDates.indexOf(date.getDate()) != -1) {
title = fd;
content = sentences[Math.floor(Math.random() * eventDates.length)];
}
$('strong', $content).html(title)
$('p', $content).html(content)
}
})
var currentDate = new Date();
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
</script></div><pre class="example-code"><code class="js">var eventDates = [1, 10, 12, 22],
$picker = $('&#35;custom-cells'),
$content = $('&#35;custom-cells-events'),
sentences = [ … ];
$picker.datepicker({
onRenderCell: function (date, cellType) {
var currentDate = date.getDate();
// Добавляем вспомогательный элемент, если число содержится в `eventDates`
if (cellType == 'day' &amp;&amp; eventDates.indexOf(currentDate) != -1) {
return {
html: currentDate + '&lt;span class=&quot;dp-note&quot;&gt;&lt;/span&gt;'
}
}
},
onSelect: function onSelect(fd, date) {
var title = '', content = ''
// Если выбрана дата с событием, то отображаем его
if (date &amp;&amp; eventDates.indexOf(date.getDate()) != -1) {
title = fd;
content = sentences[Math.floor(Math.random() * eventDates.length)];
}
$('strong', $content).html(title)
$('p', $content).html(content)
}
})
// Сразу выберем какую-ниудь дату из `eventDates`
var currentDate = currentDate = new Date();
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
</code></pre></div><h3 id="example-show-hide">Появление и скрытие календаря</h3><p>Для добавления каких-либо действий с начала анимации или по ее окончанию, используйте опции<span class="example-inline"><code>onShow</code></span>и<span class="example-inline"><code>onHide</code></span></p><div class="example"><div class="example--label">Пример</div><div class="example-content"><div class="row"><div class="col"><input id="example-show-hide-callbacks" type="text"></div><div class="col"><div id="example-show-hide-log" class="logger"></div></div></div><script>;(function () {
var log = logger('#example-show-hide-log', 'Очистить')
$('#example-show-hide-callbacks').datepicker({
onShow: function (dp, animationCompleted) {
if (!animationCompleted) {
log('start showing')
} else {
log('finished showing')
}
},
onHide: function (dp, animationCompleted) {
if (!animationCompleted) {
log('start hiding')
} else {
log('finished hiding')
}
}
})
})();</script></div><pre class="example-code"><code>$('&#35;example-show-hide-callbacks').datepicker({
onShow: function(dp, animationCompleted){
if (!animationCompleted) {
log('start showing')
} else {
log('finished showing')
}
},
onHide: function(dp, animationCompleted){
if (!animationCompleted) {
log('start hiding')
} else {
log('finished hiding')
}
}
})
</code></pre></div></article><article><h2 id="timepicker">Выбор времени</h2><p>Для выбора времени используйте опцию<span class="example-inline"><code class="js">{timepicker: true}</code></span>- она добавит время и пару ползунков, с помощью которых можно уставноить часы и минуты.</p><p>По умолчанию будет установлено текущее время на компьюетере пользователя, это значение можно изменять параметром<span class="example-inline"><code class="js">startDate</code></span>.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><div data-timepicker="true" class="datepicker-here"></div></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot;&gt;&lt;/div&gt;</code></pre></div><p><i>Подробнее о параметрах выбора времени можно почитать в <a href='#opts-timepicker' class='nav-link'>Опциях</a>.</i></p><h3 id="timepicker-format">Формат времени</h3><p>Формат времени задается в объекте локализации, либо в парамтре<span class="example-inline"><code class="js">timeFormat</code></span>. По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата в<span class="example-inline"><code class="js">timeFormat</code></span>нужно добавить символ<span class="example-inline"><code class="js">aa</code></span>или<span class="example-inline"><code class="js">AA</code></span>. После чего в виджете появятся обозочения 'AM' или 'PM', в зависимости от выбранного периода времени.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" data-timepicker="true" data-time-format="hh:ii aa" class="datepicker-here"></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot; data-time-format='hh:ii aa'&gt;&lt;/div&gt;
</code></pre></div><h3 id="timeformat-actions">Действия со временем</h3><p>Для задания максимально/минимально возможных значений часов или минут используйте параметры<span class="example-inline"><code class="js">maxHours</code></span>,<span class="example-inline"><code class="js">minHours</code></span>,<span class="example-inline"><code class="js">maxMinutes</code></span>,<span class="example-inline"><code class="js">minMinutes</code></span>. Также время можно указывать в парамтерах<span class="example-inline"><code class="js">minDate</code></span>и<span class="example-inline"><code class="js">maxDate</code></span></p><p>Давайте создадим календарь, где пользователь может выбрать время с 09:00 до 18:00, а в субботу и воскресенье с 10:00 до 16:00.</p><div class="example"><div class="example--label">Пример</div><div class="example-content"><input type="text" id="timepicker-actions-exmpl"><script>// Зададим стартовую дату
var start = new Date(),
prevDay,
startHours = 9;
// 09:00
start.setHours(9);
start.setMinutes(0);
// Если сегодня суббота или воскресенье - 10:00
if ([6, 0].indexOf(start.getDay()) != -1) {
start.setHours(10);
startHours = 10
}
$('#timepicker-actions-exmpl').datepicker({
timepicker: true,
startDate: start,
minHours: startHours,
maxHours: 18,
onSelect: function (fd, d, picker) {
// Ничего не делаем если выделение было снято
if (!d) return;
var day = d.getDay();
// Trigger only if date is changed
if (prevDay != undefined && prevDay == day) return;
prevDay = day;
// Если выбранный день суббота или воскресенье, то устанавливаем
// часы для выходных, в противном случае восстанавливаем начальные значения
if (day == 6 || day == 0) {
picker.update({
minHours: 10,
maxHours: 16
})
} else {
picker.update({
minHours: 9,
maxHours: 18
})
}
}
})</script></div><pre class="example-code"><code>&lt;input type='text' id='timepicker-actions-exmpl' /&gt;
&lt;script&gt;
// Зададим стартовую дату
var start = new Date(),
prevDay,
startHours = 9;
// 09:00
start.setHours(9);
start.setMinutes(0);
// Если сегодня суббота или воскресенье - 10:00
if ([6,0].indexOf(start.getDay()) != -1) {
start.setHours(10);
startHours = 10
}
$('&#35;timepicker-actions-exmpl').datepicker({
timepicker: true,
startDate: start,
minHours: startHours,
maxHours: 18,
onSelect: function(fd, d, picker) {
// Ничего не делаем если выделение было снято
if (!d) return;
var day = d.getDay();
// Обновляем состояние календаря только если была изменена дата
if (prevDay != undefined &amp;&amp; prevDay == day) return;
prevDay = day;
// Если выбранный день суббота или воскресенье, то устанавливаем
// часы для выходных, в противном случае восстанавливаем начальные значения
if (day == 6 || day == 0) {
picker.update({
minHours: 10,
maxHours: 16
})
} else {
picker.update({
minHours: 9,
maxHours: 18
})
}
}
})
&lt;/script&gt;
</code></pre></div></article><article><h2 id="localization">Локализация</h2><p>Вы можете добавить свою локализацию в объект<span class="example-inline"><code class="js">$.fn.datepicker.language[&quot;my-lang&quot;]</code></span>и при вызове календаря передать название языка в параметр<span class="example-inline"><code class="js">language</code></span></p><pre class="example-code"><code class="js">$.fn.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">$.fn.datepicker.language['ru'] = {
days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
monthsShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
today: 'Сегодня',
clear: 'Очистить',
dateFormat: 'dd.mm.yyyy',
timeFormat: 'hh:ii',
firstDay: 1
};
</code></pre></article><article><h2 id="options">Опции</h2><div class="param"><header class="param-header"><h3>classes</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">&quot;&quot;</code></span></p></header><p>Дополнительные классы для календаря.</p></div><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">&quot;ru&quot;</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">&quot;&quot;</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">&quot;&quot;</code></span></p></header><p>Желаемый формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет.</p><ul><li><span class="param-inline"><strong>@</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>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>altField</h3><p class="param-header--row"><span class="param-header--label">Тип</span><span class="example-inline"><code class="js">string|jQuery</code></span></p><p class="param-header--row"><span class="param-header--label">Значение по умолчанию</span><span class="example-inline"><code class="js">&quot;&quot;</code></span></p></header><p>Альтернативное поле воода в значение которого будут попадать выбранные даты с форматом<span class="example-inline"><code>altFieldDateFormat</code></span>.</p></div><div class="param"><header class="param-header"><h3>altFieldDateFormat</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">&quot;@&quot;</code></span></p></header><p>Формат даты для альтернативного поля.</p></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>keyboardNav</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><p>Сочетания клавиш:</p><ul><li><span class="param-inline"><strong>Ctrl + &rarr; | &uarr;</strong></span>- переход на месяц вперед</li><li><span class="param-inline"><strong>Ctrl + &larr; | &darr;</strong></span>- переход на месяц назад</li><li><span class="param-inline"><strong>Shift + &rarr; | &uarr;</strong></span>- переход на год вперед</li><li><span class="param-inline"><strong>Shift + &larr; | &darr;</strong></span>- переход на год назад</li><li><span class="param-inline"><strong>Alt + &rarr; | &uarr;</strong></span>- переход на 10 лет вперед</li><li><span class="param-inline"><strong>Alt + &larr; | &darr;</strong></span>- переход на 10 лет назад</li><li><span class="param-inline"><strong>Ctrl + Shift + &uarr;</strong></span>- переход на следующий вид</li><li><span class="param-inline"><strong>Esc</strong></span>- закрывает календарь</li></ul></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">&quot;bottom left&quot;</code></span></p></header><p>Позиционирование календаря отностиельно текстового поля. Первым значением задается основная ось позиционирования,
воторым - положение на этой оси. Например<span class="example-inline"><code class="js">{position: &quot;right top&quot;}</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">&quot;days&quot;</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">&quot;days&quot;</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">&quot;&quot;</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">&quot;&quot;</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">&quot;,&quot;</code></span></p></header><p>Разделитель дат, который будет использован при объеденения нескольких дат в одну строку.</p></div><div class="param"><header class="param-header"><h3>range</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, то будет включен режим выбора диапазона дат. В качестве разделителя будет использован<span class="example-inline"><code>multipleDatesSeparator</code></span></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|Date</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><pre class="example-code"><code class="js">// Выбор сегодняшнего дня
$('.datepicker').datepicker({
todayButton: new Date()
})
</code></pre></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">&quot;focus&quot;</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">&lt;svg&gt;&lt;path d=&quot;M 17,12 l -5,5 l 5,5&quot;&gt;&lt;/path&gt;&lt;/svg&gt;</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">&lt;svg&gt;&lt;path d=&quot;M 14,12 l 5,5 l -5,5&quot;&gt;&lt;/path&gt;&lt;/svg&gt;</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, &lt;i&gt;yyyy&lt;/i&gt;',
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">$('&#35;my-datepicker').datepicker({
navTitles: {
days: '&lt;h3&gt;Выберете дату заезда&lt;/h3&gt; 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">&quot;monthsShort&quot;</code></span></p></header><p>Какое поле из объекта локализации использовать в качестве названий месяцев, когда<span class="example-inline"><code class="js">view = &quot;months&quot;</code></span>.</p></div><div class="param"><header class="param-header"><h3 id="opts-timepicker">timepicker</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>Если<span class="example-inline"><code>true</code></span>, то будет добавлена возомжность выбора времени.</p></div><div class="param"><header class="param-header"><h3 id="opts-dateTimeSeparator">dateTimeSeparator</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">&quot; &quot;</code></span></p></header><p>Разделитель между датой и временем.</p></div><div class="param"><header class="param-header"><h3 id="opts-timeFormat">timeFormat</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">null</code></span></p></header><p>Формат времени. По умолчанию берется из локализации. Если передать значение сюда, то оно будет иметь больший приоритет.
Для включения 12-ти часового режима добавьте 'aa' или 'AA' в параметр<span class="example-inline"><code class="js">timeFormat</code></span>, например<span class="example-inline"><code class="js">{timeFormat: &quot;hh:ii AA&quot;}</code></span>Возможные варианты:</p><ul><li><span class="param-inline"><strong>h</strong></span>- часы</li><li><span class="param-inline"><strong>hh</strong></span>- часы, с лидирующим нулем</li><li><span class="param-inline"><strong>i</strong></span>- минуты</li><li><span class="param-inline"><strong>ii</strong></span>- минуты, с лидирующим нулем</li><li><span class="param-inline"><strong>aa</strong></span>- период дня - 'am' или 'pm'</li><li><span class="param-inline"><strong>AA</strong></span>- период дня заглавными буквами</li></ul></div><div class="param"><header class="param-header"><h3 id="opts-minHours">minHours</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">0</code></span></p></header><p>Минимальное значение часов от 0 до 23. Нельзя выбрать час меньше, чем переданное значение.</p></div><div class="param"><header class="param-header"><h3 id="opts-maxHours">maxHours</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">23</code></span></p></header><p>Максимальное значение часов от 0 до 23. Нельзя выбрать час больше, чем переданное значение.</p></div><div class="param"><header class="param-header"><h3 id="opts-minMinutes">minMinutes</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">0</code></span></p></header><p>Минимальное значение часов от 0 до 59. Нельзя вустановить значение минут меньше, чем переданное значение.</p></div><div class="param"><header class="param-header"><h3 id="opts-maxMinutes">maxMinutes</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">59</code></span></p></header><p>Максимальное значение минут от 0 до 59. Нельзя вустановить значение минут больше, чем переданное значение.</p></div><div class="param"><header class="param-header"><h3 id="opts-hoursStep">hoursStep</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">1</code></span></p></header><p>Шаг выбора часов.</p></div><div class="param"><header class="param-header"><h3 id="opts-minutesStep">minutesStep</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">1</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>onShow(inst, animationCompleted)</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>inst</strong><i>Object</i></span>- экземпляр календаря.</li><li><span class="param-inline"><strong>animationCompleted</strong><i>boolean</i></span>- индикатор состояния анимации.
если<span class="example-inline"><code>false</code></span>, то анимация только началась, если<span class="example-inline"><code>true</code></span>- уже закончилась.</li></ul></div><div class="param"><header class="param-header"><h3>onHide(inst, animationCompleted)</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>inst</strong><i>Object</i></span>- экземпляр календаря.</li><li><span class="param-inline"><strong>animationCompleted</strong><i>boolean</i></span>- индикатор состояния анимации.
если<span class="example-inline"><code>false</code></span>, то анимация только началась, если<span class="example-inline"><code>true</code></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({
// Передаем функцию, которая добавляет 11 числу каждого месяца класс 'my-class'
// и делает их невозможными к выбору.
onRenderCell: function(date, cellType) {
if (cellType == 'day' && date.getDate() == 11) {
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>destroy()</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|Array</i></span>- дата в формате JavaScript, или массив дат</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>clear()</h3></header><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><div class="param"><header class="param-header"><h3>$el</h3></header><p>DOM элемент календаря</p></div><div class="param"><header class="param-header"><h3>selectedDates</h3></header><p>Массив выбранных дат</p></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><script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script></body></html>
Reference in New Issue View Git Blame Copy Permalink