Локализация
Вы можете добавить свою локализацию в объектDatepicker.language["my-lang"]и при вызове календаря передать название языка в параметрlanguage
Datepicker.language['my-lang'] = {...}
$('.my-datepicker').datepicker({
@@ -88,7 +152,7 @@ $('.my-datepicker').datepicker({
По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет.
weekends
Типarray
Значение по умолчанию[6, 0]
Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс.-weekend-. По умолчанию это суббота и воскресенье.
dateFormat
Типstring
Значение по умолчанию""
Желаемый формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет.
- @- время в миллесекундах
- d- дата
- dd- дата с лидирующем нулем
- D- сокращенное наименование дня
- DD- полное наименование дня
- m- номер мясяца
- mm- номер месяца с лидирующем нулем
- M- сокращенное наименовение месяца
- MM- полное наименовение месяца
- yy- сокращенный номер года
- yyyy- полный номер года
- yyyy1- первый год декады, в которую входит текущий год
- yyyy2- последний год декады, в которую входит текущий год
altField
Типstring|jQuery
Значение по умолчанию""
Альтернативное поле воода в значение которого будут попадать выбранные даты с форматомaltFieldDateFormat.
altFieldDateFormat
Типstring
Значение по умолчанию"@"
Формат даты для альтернативного поля.
toggleSelected
Типboolean
Значение по умолчаниюtrue
Если true, то клик на выделенной дате снимет выделение.
keyboardNav
Типboolean
Значение по умолчаниюtrue
Если true, то по календарю можно будет осуществлять навигацию с помощью клавиатуры.
Сочетания клавиш:
- Ctrl + → | ↑- переход на месяц вперед
- Ctrl + ← | ↓- переход на месяц назад
- Shift + → | ↑- переход на год вперед
- Shift + ← | ↓- переход на год назад
- Alt + → | ↑- переход на 10 лет вперед
- Alt + ← | ↓- переход на 10 лет назад
- Ctrl + Shift + ↑ | ↓- переход на следующий вид
- Esc- закрывает календарь
position
Типstring
Значение по умолчанию"bottom left"
Позиционирование календаря отностиельно текстового поля. Первым значением задается основная ось позиционирования,
воторым - положение на этой оси. Например{position: "right top"}- утсановит позицию клаендаря справа вверху от текстового поля.
offset
Типnumber
Значение по умолчанию12
Отступ от основной оси позиционирования.
view
Типstring
Значение по умолчанию"days"
Начальный вид календаря. Возможноые значения:
days- отображение дней месяцаmonths- отображение месяцев одного годаyears- отображение годов одной декады
minView
Типstring
Значение по умолчанию"days"
Минимальное представление календаря, по наступлению которого, выбор ячейки приведет к ее активации, а не переходу к следующему виду.
-Возможные значения такие же как и у параметраview.
showOtherMonths
Типboolean
Значение по умолчаниюtrue
Если true, то будут отображаться дни других месяцев.
selectOtherMonths
Типboolean
Значение по умолчаниюtrue
Если true, то можно будет выбрать дни из других месяцев.
moveToOtherMonthsOnSelect
Типboolean
Значение по умолчаниюtrue
Если true, то при выборе дней из других месяца, будет осуществялться переход к этому месяцу.
showOtherYears
Типboolean
Значение по умолчаниюtrue
Если true, то при отображении декады, будут показаны годы из других декад.
selectOtherYears
Типboolean
Значение по умолчаниюtrue
Если true, то можно будет выбрать года из других декад
moveToOtherYearsOnSelect
Типboolean
Значение по умолчаниюtrue
Если true, то при выборе года из другой декады, будет осуществлен переход к этой декаде.
minDate
ТипDate
Значение по умолчанию""
Минимальная дата для возможности выбора. Все даты, идущее до нее нельзя будет активировать.
maxDate
ТипDate
Значение по умолчанию""
Максимальная дата для возможности выбора. Все даты, идущее после нее нельзя будет выбрать.
disableNavWhenOutOfRange
Типboolean
Значение по умолчаниюtrue
Если true, то при наступлении даты, которая была бы меньше минимально возможной или больше максимально возможной, деактвировались бы кнопки навигации 'вперед', 'назад'
multipleDates
Типboolean|number
Значение по умолчаниюfalse
Если true, то можно будет выбрать неограниченное количество дат. Если передать число, то количество выбираемых дат будет ограниченно этим числом.
multipleDatesSeparator
Типstring
Значение по умолчанию","
Разделитель дат, который будет использован при объеденения нескольких дат в одну строку.
todayButton
Типboolean
Значение по умолчаниюfalse
Если true, то будет отображена кнопка "Сегодня".
clearButton
Типboolean
Значение по умолчаниюfalse
Если true, то будет отображена кнопка "Очистить".
showEvent
Типstring
Значение по умолчанию"focus"
Тип события, по наступлению которого будет показан календарь.
autoClose
Типboolean
Значение по умолчаниюfalse
Если true, то при активации даты, календарь закроется.
prevHtml
Типstring
Значение по умолчанию<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>
Контент кнопки 'предыдущий месяц|год|декада'.
nextHtml
Типstring
Значение по умолчанию<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>
Контент кнопки 'следующий месяц|год|декада'.
navTitles
Типobject
Значение по умолчанию
navTitles = {
+Возможные значения такие же как и у параметраview.
showOtherMonths
Типboolean
Значение по умолчаниюtrue
Если true, то будут отображаться дни других месяцев.
selectOtherMonths
Типboolean
Значение по умолчаниюtrue
Если true, то можно будет выбрать дни из других месяцев.
moveToOtherMonthsOnSelect
Типboolean
Значение по умолчаниюtrue
Если true, то при выборе дней из других месяца, будет осуществялться переход к этому месяцу.
showOtherYears
Типboolean
Значение по умолчаниюtrue
Если true, то при отображении декады, будут показаны годы из других декад.
selectOtherYears
Типboolean
Значение по умолчаниюtrue
Если true, то можно будет выбрать года из других декад
moveToOtherYearsOnSelect
Типboolean
Значение по умолчаниюtrue
Если true, то при выборе года из другой декады, будет осуществлен переход к этой декаде.
minDate
ТипDate
Значение по умолчанию""
Минимальная дата для возможности выбора. Все даты, идущее до нее нельзя будет активировать.
maxDate
ТипDate
Значение по умолчанию""
Максимальная дата для возможности выбора. Все даты, идущее после нее нельзя будет выбрать.
disableNavWhenOutOfRange
Типboolean
Значение по умолчаниюtrue
Если true, то при наступлении даты, которая была бы меньше минимально возможной или больше максимально возможной, деактвировались бы кнопки навигации 'вперед', 'назад'
multipleDates
Типboolean|number
Значение по умолчаниюfalse
Если true, то можно будет выбрать неограниченное количество дат. Если передать число, то количество выбираемых дат будет ограниченно этим числом.
multipleDatesSeparator
Типstring
Значение по умолчанию","
Разделитель дат, который будет использован при объеденения нескольких дат в одну строку.
range
Типboolean
Значение по умолчаниюfalse
Если true, то будет включен режим выбора диапазона дат. В качестве разделителя будет использованmultipleDatesSeparator
todayButton
Типboolean
Значение по умолчаниюfalse
Если true, то будет отображена кнопка "Сегодня".
clearButton
Типboolean
Значение по умолчаниюfalse
Если true, то будет отображена кнопка "Очистить".
showEvent
Типstring
Значение по умолчанию"focus"
Тип события, по наступлению которого будет показан календарь.
autoClose
Типboolean
Значение по умолчаниюfalse
Если true, то при активации даты, календарь закроется.
prevHtml
Типstring
Значение по умолчанию<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>
Контент кнопки 'предыдущий месяц|год|декада'.
nextHtml
Типstring
Значение по умолчанию<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>
Контент кнопки 'следующий месяц|год|декада'.
navTitles
Типobject
Значение по умолчанию
navTitles = {
days: 'MM, <i>yyyy</i>',
months: 'yyyy',
years: 'yyyy1 - yyyy2'
diff --git a/docs/index.html b/docs/index.html
index 0ffc65a..2e3a233 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -6,11 +6,14 @@ $promo.datepicker({
<head>
<link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
<script src="dist/js/datepicker.min.js"></script>
+
+ <!-- Include English language -->
+ <script src="dist/js/i18n/datepicker.en.js"></script>
</head>
</html>
Datepicker will automatically initialize on elements with class.datepicker-here, options may be sent viadataattributes.
<input type='text' class="datepicker-here" data-position="right top" />
Manual initialization
// Initialization
$('#my-element').datepicker([options])
// Access instance of plugin
-$('#my-element').data('datepicker')
Examples
Initialization with default options
Example<input type='text' class='datepicker-here', data-language='en' />
Selecting multiple dates
Pass parameter{multipleDates: true}for selection of multiple dates. If you want to limit the number of selected dates, pass the desired number{multipleDates: 3}.
Example<input type="text"
+$('#my-element').data('datepicker')
Examples
Initialization with default options
Example<input type='text' class='datepicker-here' data-language='en' />
Selecting multiple dates
Pass parameter{multipleDates: true}for selection of multiple dates. If you want to limit the number of selected dates, pass the desired number{multipleDates: 3}.
Example<input type="text"
class="datepicker-here"
data-language='en'
data-multiple-dates="3"
@@ -26,37 +29,106 @@ $('#my-element').data('datepicker')
$('#minMaxExample').datepicker({
language: 'en',
minDate: new Date() // Now can select only dates, which goes after today
-})
Range
By default there is no functionality to select dates range, but it can be easily achieved manually.
Example–// Make Sunday and Saturday disabled
+var disabledDays = [0, 6];
+
+$('#disabled-days').datepicker({
+ language: 'en',
+ onRenderCell: function (date, cellType) {
+ if (cellType == 'day') {
+ var day = date.getDay(),
+ isDisabled = disabledDays.indexOf(day) != -1;
+
+ return {
+ disabled: isDisabled
+ }
+ }
}
})
-$end.datepicker({
+
Custom cells content
Air Datepicker allows you to change contents of cells like you want. You could useonRenderCellfor this purpose.
+Lets add extra elements to several dates, and show `lorem` text when selecting them.
Examplevar $start = $('#start'),
- $end = $('#end');
- $start.datepicker({
- language: 'en',
- onSelect: function (fd, date) {
- $end.data('datepicker')
- .update('minDate', date)
+})
+var currentDate = new Date();
+$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
var eventDates = [1, 10, 12, 22],
+ $picker = $('#custom-cells'),
+ $content = $('#custom-cells-events'),
+ sentences = [ … ];
+
+$picker.datepicker({
+ language: 'en',
+ onRenderCell: function (date, cellType) {
+ var currentDate = date.getDate();
+ // Add extra element, if `eventDates` contains `currentDate`
+ if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
+ return {
+ html: currentDate + '<span class="dp-note"></span>'
+ }
}
- })
- $end.datepicker({
- language: 'en',
- onSelect: function (fd, date) {
- $start.data('datepicker')
- .update('maxDate', date)
+ },
+ onSelect: function onSelect(fd, date) {
+ var title = '', content = ''
+ // If date with event is selected, show it
+ if (date && eventDates.indexOf(date.getDate()) != -1) {
+ title = fd;
+ content = sentences[Math.floor(Math.random() * eventDates.length)];
}
- })
Localization
You can add your localization to objectDatepicker.language["my-lang"]and pass it name to parameterlanguage
// Add custom localization
+ $('strong', $content).html(title)
+ $('p', $content).html(content)
+ }
+})
+
+// Select initial date from `eventDates`
+var currentDate = currentDate = new Date();
+$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
+