YUI: calendar

Для тех, кто не знает что такое YUI ссылка на мат. часть

Это библиотека классов для разработчиков. В этой статье я хочу поговорить о том, как ее использовать. А точнее как использовать ту ее часть которая выводит DHTML календарик

Демо, конечно же, можно глянуть вот тут, но оно далеко не wholesale jerseys полное… приходится собирать скрипт по частям из разных примеров

Итак вот такой html


<input type="text"  wholesale jerseys  size="15" name="calDate" id="calDate" value="" maxlength="30"  />
<div id="calContainer"></div>
<button type="button" id="calShow">...</button>

и начинаем подключать библиотеки


<script type="text/javascript" src="yui/yahoo/yahoo.js"></script>
<script type="text/javascript" src="yui/dom/dom.js"></script>
<script type="text/javascript" src="yui/event/event.js"></script>
<script type="text/javascript" src="yui/calendar/calendar.js"></script>

и css без него ничего не выйдет


<link type="text/css" rel="stylesheet" href="yui/calendar/assets/calendar.css">

Потом создаем wholesale jerseys свой скрипт <_script>…</_script> Все что я пишу дальше идет именно внутри этого тега


/* 
Задача: нарисовать календарь, который появляется в указанном месте по нажатию на кнопку 
и исчезает после выбора даты, результат выбора попадает в форму в формате YYYY-MM-DD.
Субботу и воскресенье выбирать нельзя, прошедшие дни тоже. 
Ну и я думаю, не стоит заставлять пользователей учить албанский
*/

// создаем новую зону видимости YAHOO.calendar
YAHOO.namespace("calendar");

// создаем загрузчик

function init() {
    // создаем новый объект салендаря с именем cal и загружаем его в div calContainer
    YAHOO.calendar.cal = new YAHOO.widget.Calendar("cal","calContainer", { 
        // средние имена дней (по умолчанию длинные)  Principe  
        LOCALE_WEEKDAYS:"medium",
                 // минимальная дата  Основы  - сегодня
        текст           mindate: new Date(),
                // текущая дата сегодня
                pagedate: new Date() 
        });
	/* 
	массив параметров при создании можно  Maya,  вынести и отдельно как показано ниже но я решил показать оба способа
	*/

	YAHOO.calendar.cal.cfg.setProperty("START_WEEKDAY ",   1); // первый день недели - понедельник а не воскресенье

	// Русифицируем календарь
	YAHOO.calendar.cal.cfg.setProperty("MONTHS_SHORT",   ["янв", "фев", "мар", "апр", "май", "июн", "июл", "авг", "сен", "окт", "ноя", "дек"]); 
	YAHOO.calendar.cal.cfg.setProperty("MONTHS_LONG",    ["январь", "февраль", "март", "апрель", "май", "июнь", "июль", "август", "сентябрь", "октябрь", "ноябрь", "декабрь"]); 
	YAHOO.calendar.cal.cfg.setProperty("WEEKDAYS_MEDIUM",["вск", "пон", "втр", "срд", "чет", "пят", "суб"]); 
	YAHOO.calendar.cal.cfg.setProperty("WEEKDAYS_LONG",  ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота", "воскресенье"]); 

	// функция которая получает координаты html элемента
	var getAbsPos = function  (p) {
		var s = { x:0, y:0 };
		while (p.offsetParent)
		{
			s.x += p.offsetLeft;
			s.y += p.offsetTop;
			p = p.offsetParent;
		}
		return s;
	}

	// получаем координаты поля куда надо  para  ввести дату и выводим на его месте календарь, можно выводить под или над ним
	var calCon = document.getElementById("calContainer");
	var calBut = document.getElementById("calDate");
	// функцию getAbsPos я обьясню  ????  чуть ниже
	calCon.style.top = getAbsPos(calBut).y + 'px';
	calCon.style.left = getAbsPos(calBut).x + 'px';

	// пишем обработчик события выбора дяты
	var handleSelect function (type,args,obj) {
		var year = date[0][0][0], month = date[0][0][1], day = date[0][0][2];
		
		var txtDate1 = document.getElementById("calDate");
		// формат даты YYYY-MM-DD
		txtDate1.value = year + "-" + month + "-" + day;
		
		// прячем календарь
		var txtCon = document.getElementById("calContainer");
		txtCon.style.display = "none";
	}

	// устанавливаем событие при выборе даты
	YAHOO.calendar.cal.selectEvent.subscribe(handleSelect, YAHOO.calendar.cal, true);
	YAHOO.calendar.cal.render();

	// перехват нажатия кнопки - вызов календаря
	YAHOO.util.Event.addListener("calShow", "click", YAHOO.calendar.cal.show, YAHOO.calendar.cal, true);

	// отключаем субботу и воскресенье
	var myCustomRenderer = function(workingDate, cell) { return YAHOO.widget.Calendar.STOP_RENDER; }
	YAHOO.calendar.cal.addWeekdayRenderer(7, myCustomRenderer);
	YAHOO.calendar.cal.addWeekdayRenderer(1, myCustomRenderer);

	YAHOO.calendar.cal.render();
}

вот и сказочке помощью конец… а в следующей сказочке будет автокомплит с ajax для продвинутых

PS. вопросы не задавать, почту не писать, google вам поможет.

PSS. меня вот спросили чем wholesale jerseys эта библиотека лучше чем например вот эта — ответ может и не чем, просто она есть!