Изменения

Календарь (datepicker)

713 байтов добавлено, 18:44, 17 марта 2018
м
Нет описания правки
[[Category:Техактивы]]* Комплект поставки: calendar.min.js, calendar-material.css или calendar.css
* Исходники: http://yourcmc.ru/git/vitalif-js/calendar
* Лицензия: MIT
(на скриншотах наложены дополнительные стили на кнопку и выпадающие списки)
Чтобы использовать, нужно подключить calendar.js и calendar.css (который, кстати, можно отредактировать по своему вкусу), а потом написать гдеПодключение:<code-то javascript код <tt>Calendar.set('input_id')<input/tt> * ID или <tt>Calendar.set(input_objectобъект */, { /* опции */ });</ttcode-javascript>.
Чтобы поменять конфигурациюЕсли в поле после даты введено время, можно модифицировать следующие поля объекта Calendar то при изменении даты кликом из календаря оно не меняется. Доступные опции (приведены со значениями по умолчанию):
<code-javascript>
Calendar.{ // названия месяцев month_names = : ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"]; , // названия месяцевподпись кнопки "закрыть"Calendar. close_label = : "Закрыть"; , // подпись кнопки "закрыть"названия дней неделиCalendar. weekdays = : ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"]; // названия дней недели,Calendar.sunday = 6; // задаёт порядковый номер воскресенья (0-6). у америкосов здесь был бы 0Calendar.selectboxes = false; sunday: 6, // если true, то для года и месяца используются выпадающие списки, иначе - таблицаCalendar.years = {min selectboxes: -70false, max: 10}; // если selectboxes == true, то здесь задаётся диапазон выводимых в выпадающий список годов относительно текущегоCalendar.format = "d.m.Y"; years: {min: -70, max: 10}, // формат даты; можно выбрать либо d.m.Y, либо Y-m-d, другие форматы не поддерживаются format: "d.m.Y", // начальный вид календаря - days (дни), months (месяцы) или years (годы) start: 'days', // колбэк, если задан - вместо прямой установки значения в поле вызывается он callback: null,}
</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>