Календарь (datepicker) — различия между версиями

Материал из YourcmcWiki
Перейти к: навигация, поиск
(Новая страница: «* Комплект поставки: calendar.min.js, calendar.css * Исходники: http://yourcmc.ru/git/vitalif-js/calendar * Лицензия: MIT Про…»)
 
м
 
(не показано 13 промежуточных версий этого же участника)
Строка 1: Строка 1:
−
* Комплект поставки: calendar.min.js, calendar.css
+
[[Category:Техактивы]]
 +
* Комплект поставки: calendar.min.js, calendar-material.css или calendar.css
 
* Исходники: http://yourcmc.ru/git/vitalif-js/calendar
 
* Исходники: http://yourcmc.ru/git/vitalif-js/calendar
 
* Лицензия: MIT
 
* Лицензия: MIT
Строка 9: Строка 10:
 
(на скриншотах наложены дополнительные стили на кнопку и выпадающие списки)
 
(на скриншотах наложены дополнительные стили на кнопку и выпадающие списки)
  
−
Чтобы использовать, нужно подключить calendar.js и calendar.css (который, кстати, можно отредактировать по своему вкусу), а потом написать где-то javascript код <tt>Calendar.set('input_id')</tt> или <tt>Calendar.set(input_object)</tt>.
+
Подключение:
 +
<code-javascript>
 +
Calendar.set(input/* ID или объект */, { /* опции */ });
 +
</code-javascript>
  
−
Чтобы поменять конфигурацию, можно модифицировать следующие поля объекта Calendar (приведены со значениями по умолчанию):
+
Если в поле после даты введено время, то при изменении даты кликом из календаря оно не меняется.
 +
 
 +
Доступные опции (приведены со значениями по умолчанию):
 
<code-javascript>
 
<code-javascript>
−
Calendar.month_names = ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"]; // названия месяцев
+
{
−
Calendar.close_label = "Закрыть"; // подпись кнопки "закрыть"
+
    // названия месяцев
−
Calendar.weekdays = ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"]; // названия дней недели
+
    month_names: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],
−
Calendar.sunday = 6; // задаёт порядковый номер воскресенья (0-6). у америкосов здесь был бы 0
+
    // подпись кнопки "закрыть"
−
Calendar.selectboxes = false; // если true, то для года и месяца используются выпадающие списки, иначе - таблица
+
    close_label: "Закрыть",
−
Calendar.years = {min: -70, max: 10}; // если selectboxes == true, то здесь задаётся диапазон выводимых в выпадающий список годов относительно текущего
+
    // названия дней недели
−
Calendar.format = "d.m.Y"; // формат даты; можно выбрать либо d.m.Y, либо Y-m-d, другие форматы не поддерживаются
+
    weekdays: ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"],
 +
    // задаёт порядковый номер воскресенья (0-6). у америкосов здесь был бы 0
 +
    sunday: 6,
 +
    // если true, то для года и месяца используются выпадающие списки, иначе - таблица
 +
    selectboxes: false,
 +
    // если selectboxes == true, то здесь задаётся диапазон выводимых в выпадающий список годов относительно текущего
 +
    years: {min: -70, max: 10},
 +
    // формат даты; можно выбрать либо d.m.Y, либо Y-m-d, другие форматы не поддерживаются
 +
    format: "d.m.Y",
 +
    // начальный вид календаря - days (дни), months (месяцы) или years (годы)
 +
    start: 'days',
 +
    // колбэк, если задан - вместо прямой установки значения в поле вызывается он
 +
    callback: null,
 +
}
 
</code-javascript>
 
</code-javascript>
 +
 +
<html>
 +
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
 +
<link rel="stylesheet" href="//yourcmc.ru/calendar.js/calendar-material.css" type="text/css" />
 +
<script src="//yourcmc.ru/calendar.js/calendar.min.js" type="text/javascript"></script>
 +
 +
<input id="x" style="margin: 50px">
 +
<script>
 +
Calendar.set(document.getElementById('x'));
 +
</script>
 +
 +
<input id="y" style="margin: 50px">
 +
<script>
 +
Calendar.set(document.getElementById('y'), { selectboxes: true });
 +
</script>
 +
</html>

Текущая версия на 21:44, 17 марта 2018

Простой календарик для текстовых полей ввода с поддержкой двух режимов — в первом выбор года и месяца делается с помощью обычных выпадающих списков, во втором — год и месяц выбираются подобно дням, в таблице:

Calendar1.pngCalendar2.pngCalendar3.pngCalendar4.png

(на скриншотах наложены дополнительные стили на кнопку и выпадающие списки)

Подключение: 

Calendar.set(input/* ID или объект */, { /* опции */ });

Если в поле после даты введено время, то при изменении даты кликом из календаря оно не меняется.

Доступные опции (приведены со значениями по умолчанию): 

{
    // названия месяцев
    month_names: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"], 
    // подпись кнопки "закрыть"
    close_label: "Закрыть",
    // названия дней недели
    weekdays: ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"],
    // задаёт порядковый номер воскресенья (0-6). у америкосов здесь был бы 0
    sunday: 6,
    // если true, то для года и месяца используются выпадающие списки, иначе - таблица
    selectboxes: false,
    // если selectboxes == true, то здесь задаётся диапазон выводимых в выпадающий список годов относительно текущего
    years: {min: -70, max: 10},
    // формат даты; можно выбрать либо d.m.Y, либо Y-m-d, другие форматы не поддерживаются
    format: "d.m.Y",
    // начальный вид календаря - days (дни), months (месяцы) или years (годы)
    start: 'days',
    // колбэк, если задан - вместо прямой установки значения в поле вызывается он
    callback: null,
}

Источник — «https://yourcmc.ru/wiki/index.php?title=Календарь_(datepicker)&oldid=11658»