339 lines
66 KiB
HTML
339 lines
66 KiB
HTML
|
<!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&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"><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 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"><input type='text' class='datepicker-here' />
|
|||
|
|
</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"><input type="text"
|
|||
|
|
class="datepicker-here"
|
|||
|
|
data-multiple-dates="3"
|
|||
|
|
data-multiple-dates-separator=", "
|
|||
|
|
data-position='right top'/>
|
|||
|
|
</code></pre></div><h3 id="example-inline">Постоянно видимый календарь</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 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"><input type="text"
|
|||
|
|
class="datepicker-here"
|
|||
|
|
data-min-view="months"
|
|||
|
|
data-view="months"
|
|||
|
|
data-date-format="MM yyyy" />
|
|||
|
|
</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"><input type="text" data-range="true" data-multiple-dates-separator=" - " class="datepicker-here"/>
|
|||
|
|
</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 = $('#custom-cells'),
|
|||
|
|
$content = $('#custom-cells-events'),
|
|||
|
|
sentences = [ … ];
|
|||
|
|
|
|||
|
|
$picker.datepicker({
|
|||
|
|
onRenderCell: function (date, cellType) {
|
|||
|
|
var currentDate = date.getDate();
|
|||
|
|
|
|||
|
|
// Добавляем вспомогательный элемент, если число содержится в `eventDates`
|
|||
|
|
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)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// Сразу выберем какую-ниудь дату из `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>$('#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><div class="datepicker-here" data-timepicker="true"></div></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><div class="datepicker-here" data-timepicker="true" data-time-format='hh:ii aa'></div>
|
|||
|
|
</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><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();
|
|||
|
|
|
|||
|
|
// Обновляем состояние календаря только если была изменена дата
|
|||
|
|
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>
|
|||
|
|
|
|||
|
|
</code></pre></div></article><article><h2 id="localization">Локализация</h2><p>Вы можете добавить свою локализацию в объект<span class="example-inline"><code class="js">$.fn.datepicker.language["my-lang"]</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">""</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">"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>@</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">""</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">"@"</code></span></p></header><p>Формат даты для альтернативного поля.</p></div><div class="param"><header class="
|
|||
|
|
воторым - положение на этой оси. Например<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 c
|
|||
|
|
$('.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">"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>Какое поле из объекта локализации использовать в качестве названий месяцев, когда<span class="example-inline"><code class="js">view = "months"</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">" "</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: "hh:ii AA"}</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
|
|||
|
|
если<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>Функция должна возвраща<D189>
|
|||
|
|
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>
|