Плагины для 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).

<div id="e2d">Выбранная дата</div>
<input type="text" maxlength="20" size="14" class="datefield" id="e2c"/>
<input type="text" maxlength="20" size="14" class="datefield" id="e2c"/>
<script type="text/javascript">
	$('INPUT[id=e2c]').DmCalendar(function(d, m, y, c, cd, cm, cy, txt){
		var buf					= [
									cd?'['+d+']':d,
									cm?'['+m+']':m,
									cy?'['+y+']':y
								  ];
		$('#e2d').text(buf.join('.')+(c?' дата выбрана':''));
	});
</script>

Настройка отображения

Можно поменять настройки календаря, которые хранятся в объекте $.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;
}

Версии