Плагины для jQuery: Календарь

Что тут есть?

Как использовать

// Без обработчика событий
$(...).DmCalendar();
// С обработчиком событий
$(...).DmCalendar(function(
	d,	// День
	m,	// Месяц
	y,	// Год
	c,	// Тип изменения даты:
		//   0 - дата изменилась без клика (провели мышкой по календарю),
		//   1 - дата изменилась кликом (кликнули на дату, месяц или год и дата поменялась, 
		//       изменили дату стрелками),
		//   2 - кликнули, но выбранная дата осталась прежней (кликнули на дату, месяц или 
		//       год и дата НЕ поменялась, нажали Enter) 
	cd,	// true - изменился день
	cm,	// true - изменился месяц
	cy,	// true - изменился год
	txt	// Текстовое представление даты
){...});

Вставка в любой контейнер

• Влево: переключиться на предыдущий день
• Вправо: переключиться на следующий день
• Вверх: переключиться на 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>

Подключение к полю ввода

<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	= 
{
	// Версия
	version:		1.1,
	// Символ для форматирования даты
	joindate:		'.',
	// Дни недели
	dayofweek:		[ 'пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс' ],
	// Месяцы
	monthname:		[ 'январь', 'февраль', 'март', 'апрель', 'май', 'июнь', 'июль', 'август', 'сентябрь', 'октябрь', 'нояврь', 'декабрь' ],
	// Выходные дни
	dayoffwork:		[ true, false, false, false, false, false, true],
	// Какие тэги являются полями ввода
	fields:			{ 'INPUT': true, 'TEXTAREA': true },
	// Календарь перерисовывается при перемещении мышки по календарю или только по клику
	changeonover:	false
};

/* Стиль таблицы календаря */
#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; }

Получить версию

Версии