Плагины для jQuery: Календарь
Что тут есть?
Реализация отображения календаря и поля ввода даты с использованием этого календаря.
Как использовать
Код для подключения календаря:
// Без обработчика событий
$(...).DmCalendar();
// С обработчиком событий
$(...).DmCalendar(function(
d, // День
m, // Месяц
y, // Год
c, // Тип изменения даты:
// 0 - дата изменилась без клика (провели мышкой по календарю),
// 1 - дата изменилась кликом (кликнули на дату, месяц или год и дата поменялась,
// изменили дату стрелками),
// 2 - кликнули, но выбранная дата осталась прежней (кликнули на дату, месяц или
// год и дата НЕ поменялась, нажали Enter)
cd, // true - изменился день
cm, // true - изменился месяц
cy, // true - изменился год
txt // Текстовое представление даты
){...});
Вставка в любой контейнер
Этот вариант был сделан для отображения календаря на странице без подключения к полю ввода.
На календарь можно попасть переключением по Tab, когда календарь в фокусе, то дату можно менять с клавиатуры:
- Влево: переключиться на предыдущий день
- Вправо: переключиться на следующий день
- Вверх: переключиться на 1 неделю назад
- Вниз: переключиться на 1 неделю вперед
- Shift+Вверх: переключиться на предыдущий месяц
- Shift+Вниз: переключиться на следующий месяц
- Shift+Влево: переключиться на предыдущий год
- Shift+Вправо: переключиться на следующий год
- Home: переключиться на текущий день
- Enter: выбор даты
Пример | Код |
Выбранная дата
|
<div id="e1d"></div>
<div id="e1c"></div>
<script type="text/javascript">
$('#e1c').DmCalendar(function(d, m, y, c, cd, cm, cy, txt){
var buf = [
cd?'['+d+']':d,
cm?'['+m+']':m,
cy?'['+y+']':y
];
$('#e1d').text(buf.join('.')+(c?' дата выбрана':''));
});
</script>
|
Подключение к полю ввода
Вариант с вводом даты в текстовое поле. Формат ввода даты: день-месяц-год (разделитель между составляющими
даты не важен). Если в начале указать + или -, то вводимое значение будет смещением относительно текущей даты:
+2 - послезавтра
-0 1 - предыдущий месяц
+0 0 1 - следующий год
по Enter и Tab проводится форматирование даты (DD.MM.YYYY).
Настройка отображения
Можно поменять настройки календаря, которые хранятся в объекте $.DmCalendar:
$.DmCalendar =
{
// Версия
version: 1.1,
// Символ для форматирования даты
joindate: '.',
// Дни недели
dayofweek: [ 'пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс' ],
// Месяцы
monthname: [ 'январь', 'февраль', 'март', 'апрель', 'май', 'июнь',
'июль', 'август', 'сентябрь', 'октябрь', 'нояврь', 'декабрь' ],
// Выходные дни
dayoffwork: [ true, false, false, false, false, false, true],
// Какие тэги являются полями ввода
fields: { 'INPUT': true, 'TEXTAREA': true },
// Календарь перерисовывается при перемещении мышки по календарю или только по клику
changeonover: false
};
Нужно прописать в CSS:
/* Стиль таблицы календаря */
#calendar.t
{
font-family: Arial;
background-color: #FFFFFF;
text-align: center;
border: 1px solid #AAA;
cursor: default;
font-size: 9pt;
}
/* Стиль таблицы календаря (активного) */
#calendar.focus
{
border: 1px solid #000;
}
/* Стиль ячеек дней недели */
#calendar .t
{
font-weight: bold;
color: #888;
border-bottom: 1px solid #AAA;
}
/* Стиль ячеек дней */
#calendar .d
{
width: 32px;
cursor: pointer;
font-weight: bold;
font-size: 11pt;
}
/* Стиль пустой ячейки над месяцами */
#calendar #ph
{
border-left: 1px solid #AAA;
border-bottom: 1px solid #AAA;
}
/* Стиль ячеек выходных дней */
#calendar .h
{
background-color: #FFE4E4;
}
/* Стиль ячеек месяцев и годов */
#calendar .m, #calendar .y
{
color: #888;
cursor: pointer;
border-left: 1px solid #AAA;
padding-left: 4px;
padding-right: 4px;
}
/* Стиль ячеек годов (выделение размерами и/или цветом) */
#calendar #y3, #calendar #y5
{
color: #555;
font-size: 11pt;
}
#calendar #y2, #calendar #y6
{
color: #777;
font-size: 10pt;
}
#calendar #y1, #calendar #y7
{
color: #999;
}
#calendar #y0, #calendar #y8
{
color: #BBB;
}
#calendar #y4
{
font-weight: bold;
font-size: 12pt;
}
/* Стиль выделенных ячеек */
#calendar .s
{
color: #fff;
background-color: #888;
}
/* Стиль затененных ячеек дней */
#calendar .nc
{
color: #AAA;
font-weight: normal;
}
/* Стиль ячейки текущей даты */
#calendar #now
{
border-top: 1px solid #AAA;
cursor: pointer;
}
/* Стиль ячейки выбранной даты */
#calendar #cur
{
border-top: 1px solid #AAA;
border-left: 1px solid #AAA;
cursor: pointer;
}
Версии
Версия |
Описание |
1.0 |
Первая реализация, не публиковалась |
1.1 14.03.2009 |
Первая публикация календаря |
1.2 24.10.2009 |
При использовании календаря с полем ввода при перемещении мыши фокус с поля ввода не теряется. |
1.3 29.12.2009 |
Теперь можно отключить изменение месяца и года при перемещении мыши по календарю, изменение происходит только по клику. |