Смысл простой до нельзя - надо на стандартном календаре выделять определенные дни. Стандартными средствами этого естественно сделать нельзя. Хачить ui.datepicker.js тоже нельзя, при этом желательно еще передавать список дней прямо в конструктор календаря. Нужно выкрутится, ну в общем как всегда.

Начинаем кое-как обживаемся в тех узких рамках в которые себя загнали - используем замыкания и делегацию и прочие малоиспользуемых плюшки типа функции apply и регулярных выражений.

(function($) {

	/**
	 * autor: CTAPbIu_MABP
	 * email: ctapbiumabp@gmail.com
	 * site: http://mabp.kiev.ua/2009/08/11/customized-datepicker/
	 * license: MIT & GPL
	 * last update: 11.08.2009
	 * version: 1.0
	 */
     
	// сохраняем старые функции
	var old_datepicker =  $.fn.datepicker;
	var old_generateHTML = $.datepicker._generateHTML;

	// и делигируем их новым
	$.datepicker._generateHTML = function(inst) {
		// получаем календарь ввиде raw-html
		var _generateHTML = old_generateHTML.apply(this, arguments),
		// выгребаем даты для этого календаря
		dates = inst.settings.hightlight.values;
		titles = inst.settings.hightlight.titles;
		
		// и начинаем расскрашивать
		for (var i in dates){
			if (dates[i].getFullYear() == inst.drawYear && dates[i].getMonth() == inst.drawMonth){
				_generateHTML = _generateHTML.replace(
				// магия регулярок
				new RegExp('<a class="([^"]+)" href="#">' + dates[i].getDate() + '</a>','i'),
				function(link, classes){
					// еще больше магии
					return link.replace(classes, classes + ' ui-state-custom' + 
						(titles[i] ? '" title="'+ titles[i] : ''));
				});
			}
		}
		return _generateHTML;
	};
	
	// делегируем конструктор
	$.fn.datepicker = function(options){
		// новые опции преобразовываем к объекту
		options.hightlight = $.extend(
			{format:$.datepicker._defaults.dateFormat, values:[], titles:[], settings:{}},
			options.hightlight
		);
		
		// сразу превращаем даты в объекты типа Date для того чтобы сохранить 
		options.hightlight.values = $.map(options.hightlight.values, function(value){
			return $.datepicker.parseDate(options.hightlight.format, value, options.hightlight.settings);
		});
		
		return old_datepicker.apply(this, [options]);
	};
})(jQuery);

Сначала очень долго думал как же для каждого инстанса календаря сделать свою функцию generateHTML с замкнутыми датами, но потом обнаружил что разработчики тоже сильно не парились и все совали в $.data и я тоже решил этим воспользоваться. Как никак уже готовое решение и переиспользование кода.

Пока писал, обнаружил еще одно забавное недокументированую (кажется) функцию, оказывается есть отдельный CSS класс для выходных, к которому нет реализации. Вот я ее в пример и добавил.

Используется это все вот так.

.ui-datepicker-week-end .ui-state-default{
       border: 1px solid #ffa1a1;
}
.ui-state-custom {
       border: 1px solid #f0f !important;
}

$("#datepicker").datepicker({
	firstDay: 1 , 
	hightlight : {
		format:"dd/mm/yy",
		values:["1/08/2009","5/08/2009","15/08/2009"],
		titles:["Рас","Два","Три"],
		settings:{}
	}
});

Проще не бывает, а скачать можно тут

Для примера возьмем два selectbox'а и попробуем выбрах в них интервал времени. Допустим нам надо выбрать два месяца, да так чтоб месяц выбранный в первом шел раньше чем месяц выбранный во втором. Один и тот же месяц тоже желательно не выбирать, поэтому в первом нельзя выбрать декарь, а во втором - январь. И последние условие: если в первом selectbox'е выбрали месяц который идет после месяца, выбранного во втором, то во втором надо отметить месяц идущий за тем который выбрали в первом. В общем масло сливочное с растительным жареное на сале и маргарине, но я надеюсь вы поняли.

Итак нам как всегда понадобиться jQuery и немного уличной магии.

jQuery().ready(function($){
	$("select[name=first]").change(function(){
		var val = $(":selected",this).val(),
			col = $("select[name=second] option");
		col.show().each(function(){
			if ($(this).val() <= val)
				$(this).hide();
		})
		if(!col.filter(":selected").is(":visible"))
			col.filter(":visible:first").attr({selected:"selected"});
	}).change().find(":last").hide();
});

UPD Вообще у меня в хорошей традиции на следующий день после написания статьи вносить правки. Вот так и сегодня, я посмотрел свое творение под оперой и ослом и понял что надо что-то менять. Итак окончательный вариант:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Непересекающиеся выпадающие списки</title>
<script src="jquery-1.3.2.js"></script>
<script>
jQuery().ready(function($){
	$("select[name=first]").change(function(){
		var val = $(":selected",this).val(),
			col = $("select[name=second] option");
		col.removeAttr("disabled").each(function(){
			if ($(this).val() <= val)
				$(this).attr({disabled:'disabled'});
		})
		if(col.filter(":selected").is(":disabled"))
			col.filter(":enabled:first").attr({selected:"selected"});
	}).change().find(":last").attr({disabled:'disabled'});
});
</script>
</head>
<body>
<form action="">

<select name="first">
<option value="101">Январь</option>
<option value="102">Февраль</option>
<option value="103">Март</option>
<option value="104">Апрель</option>
<option value="105">Май</option>
<option value="106">Июнь</option>
<option value="107">Июль</option>
<option value="108">Август</option>
<option value="109">Сентябрь</option>
<option value="110">Октябрь</option>
<option value="111">Ноябрь</option>
<option value="112">Декабрь</option>
</select>

<select name="second">
<option value="101">Январь</option>
<option value="102">Февраль</option>
<option value="103">Март</option>
<option value="104">Апрель</option>
<option value="105">Май</option>
<option value="106">Июнь</option>
<option value="107">Июль</option>
<option value="108">Август</option>
<option value="109">Сентябрь</option>
<option value="110">Октябрь</option>
<option value="111">Ноябрь</option>
<option value="112">Декабрь</option>
</select>

</form>

</body>
</html>

PS: хотя может стоило статью позиционировать как мануал по использованию псевдоселекторов?..

Давайте обрисуем наши потребности: нам нужен сдвоенный календарик выбора периода, чтобы дата начала периода не была больше даты конца периода и меньше какой-то границы, соответственно дата конца периода не должна быть меньше даты начала и больше сегодняшней. Для этого я набросал вот такой лаконичный код.

jQuery().ready(function($){
	// двум полям ввода
	$(":input[name='fromDate'], :input[name='toDate']")
		// устанавливаем начальное значение (текущую дату)
		.val($.datepicker.formatDate('dd/mm/yy', new Date()))
		// и добавляем календарик, которому в виде опций передаем 
		// русскую локализацию объединенную с массивом настроек
		.datepicker($.extend({}, {
 			// в call-back функции перед показом задаем доступный для выбора период
			beforeShow: function (input) { 
				return {
					// формируем верхнюю границу
					minDate: (input.name == "toDate" 
						// если не выбрана дата на втором календаре
						? $(":input[name='fromDate']").datepicker("getDate")
 						// берем нижнюю границу
						: $.datepicker.parseDate("dd/mm/yy", "01/01/2009") ), 
					// формируем нижнюю границу
					maxDate: (input.name == "fromDate" 
						// если не выбрана дата на первом календаре
						? $(":input[name='toDate']").datepicker("getDate") 
 						// берем сегодняшнюю дату
						: new Date())
				}; 
			}, 
			// задаем формат даты
			dateFormat: "dd/mm/yy", 
			// указываем путь к картинке
			buttonImage: "themes/smoothness/images/calendar.gif", 
			// показываем картинку возле обоих input'ов
			showOn: "both",
			// убираем кнопку из под картинки
			buttonImageOnly: true 
		})
	);
});

Что же первое приходит в голову, когда видишь слово "comet", правильно - чистящее средство, потом комета, а оно почему-то означает технологию (хотя это, наверное, громко сказано, скорее паттерн) постоянного соединения с сервером. Все же в толстых книжках читали, что после того как сервер получил запрос и отдал ответ браузеру, он забывает, что к нему вообще кто-то обращался. А тут поседели умные люди и стали седыми. Нет, посидели и придумали идею, как заставить передавать браузеру информацию, изменившуюся на сервере.

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

И так с чего же начать, начать надо с того что выберем серверным языком php а клиентским как это не странно — javascript. Для того чтобы соединение не разрывалось, php скрипт должен все время работать, но тут мы встречаем два ограничения. Первое вполне логичное у нас нет бесконечного скрипта который бы все время что-то делал, да это и не надо, достаточно включить в код бесконечный цикл. А вот собственно второе ограничение уже куда более неприятное: по умолчанию php скрипт может выполняться только 30 секунд, после чего сервер выдает ошибку о зависании скрипта. С этим мы будем бороться, но об этом потом.

Теперь когда мы имеем серверную часть нужно придумать как она будет контактировать с клиентской. Для этого нужно написать еще какую-то функцию на javascript, которую бы мог вызвать сервер, причем это должно работать параллельным потоком относительно основной страницы. Для реализации параллельного запроса идеально подходит AJAX, но, к сожалению IE и Opera, не умеют корректно обрабатывать событие onreadystatechange==3 , поэтому для реализации параллельного потока в них используют iframe, а я буду использовать его и для остальных браузеров.

В общем пора переходить к делу. Для реализации порционного отдавания контента на php нужно использовать буферизацию, а то php будет хранить все у себя, аж пока не закончит работу скрипта, чего мы собственно пытаемся избежать. Дальше я приведу пример скрипта, который каждую секунду отдает браузеру команду обновить часы и текущее время.

// устанавливаем неограниченное время выполнения скрипта
ini_set('max_execution_time', 0);

// начинаем буферизацию
ob_start();
// ставим флаг отдавать буфер каждый раз как он больше не нужен
ob_implicit_flush(true);

// отдаем заголовки, чтобы избежать кэширования
header('Expires: Sut, 01 Jan 2000 00:00:00 GMT');
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');

// выбрасываем в поток килобайт пробелов, 
// это нужно из-за того, что php первый раз меньше отдавать не хочет
echo str_repeat(chr(32), 1024);
ob_get_clean();   

// в бесконечном цикле описываем то передачу информации в браузер
while(true){
	echo ""
		."<script type='text/javascript'>\n"
		."parent.$(parent.document).trigger('comet".$_GET['sid']."',['".date("D, d M Y H:i:s O")."']);\n"
		."</script>\n";
	ob_get_clean();
	// ждем 1 секунду до следующего обновления
	sleep(1);
}

А вот и пример работы этого скрипта находиться сразу под кодом.

Теперь давайте разберем, клиентскую часть, она тоже весьма не большая. Как я уже говорил, ее задача в основном создать iframe и приаттачить нужные события. Событий может быть всего два: обновление с новыми данными и разрыв соединения с сервером. Оба события необязательные, потому что сервер и сам вполне может отдавать готовый javascript код, а разорванное соединение можно восстанавливать, а можно предположить, что все обновления с сервера уже пришли и новых больше не будет.

(function($) {

	// конструктор объекта
	var comets = function(options){
		this.init(options);
	}
	
	// собственно сам объект
	comets.prototype = {
		comets : [], // итератор соединений
		options : { // массив функций по умолчанию
			connect:function(sid){
				// функция, выполняющаяся при разрыве соединения с сервером
			},
			update:function(data){
				// функция, вызываемая сервером с новыми данными
			},
			url:"", // адрес бэкэнда
		},
		init : function(options){
			var self = this, 
				comet = {},
				sid = self.comets.push([]); // i++

			// создаем реальный массив параметров
			$.extend(comet,self.options,options)
			
			// создаем iframe и соединение
			$("<iframe/>")
				.appendTo("body")
				.attr({src:comet.url+sid})
				.bind("load", function(){comet.connect.apply(this,[sid]);})
				
			// аттачим события, к ифрейму аттачить нельзя, так как он еще не загрузился
			$(document).bind("comet"+sid, function(event,data){comet.update.apply(this,[data])})
		}
	}

	$.fn.comets = function(options){
		// создаем новый comet
		new comets(options);
		
		// не нарушаем цепочку
		return this;
	}
})(jQuery);

Теперь надо передать в этот плагин (да я как всегда все делаю плагином под jQuery) наши функции.

$().comets({
	// функция которая обновит такст часов
	update:function(data){
		$("#clock").text(data);
	},
	// функция которая востановит соединение с сервером
	connect:function(sid){
		$(this).attr({src:"clock.php?sid="+sid});
	},
	// адресс бэкэнда
	url:"clock.php?sid="
});

Как я говорил в начале я расскажу как бороться с временем выполнения скрипта если вам недоступна функция ini_set(); Для этого надо узнать сколько времени может выполняться скрипт и прерывать его работу незадолго до этого времени. Если передать браузеру команду восстановить соединение, то этого можно не указывать в параметрах в javascript. Вносим правки в алгоритм работы скрипта:

// узнаем время рабы и отнимаем 5 секунд запаса
$metime = ini_get('max_execution_time') - 5;

// узнаем время начала и конца работы скрипта
$start = $stop = array_sum(explode(" ",microtime()));

ob_start();
ob_implicit_flush(true);
header('Expires: Sut, 01 Jan 2000 00:00:00 GMT');
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');

echo str_repeat(chr(32), 1024);
ob_get_clean();   

// по условию, что время начала больше чем время конца минус время исполнения прерываем процедуру
while($start > $stop-$metime){
	echo ""
		."<script type='text/javascript'>\n"
		."parent.$(parent.document).trigger('comet".$_GET['sid']."',['".date("D, d M Y H:i:s O")."']);\n"
		."</script>\n";
	ob_get_clean();
	$stop = array_sum(explode(" ",microtime()));
	sleep(1);
}

// echo "<script type='text/javascript'>window.location='".$_SERVER['PHP_SELF']."?sid=".$_GET['sid']."';</script>n";

Вот пример работы этого кода, только для наглядности я поставил обрыв соединения каждые 10 секунд.

Вот такие вот у меня получились простые комёты ;) , возможно, я их немного доделаю и опубликую, свежую версию, но это не сейчас.

Мне чета вдруг захотелось написать что-то очень простое но элегантное.

Для этого мне понадобилось завести массив со значениями продолжительности влияния знака в секундах.

Для подсчета высокосных годов, надо узнать остаток от деления на полный высокосный цикл (365*24*60*60)*3+(366*24*60*60), получаться 126230400. Оставшееся нужно поделить на (365*24*60*60), остаток от этого деления это последний год из которого можно найти знак

Пример 1975-07-23 это 175298400 секунд с начала 1970 года. Поделив на 126230400 получаем остаток 49068000 а поделив это на 31536000 получаем 17532000. Это количество дней которое прошло с начала 1975 до дня рождения ASMO.

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

Еще одна поправка на высокосность года. 1970 (начало эры Unix) не был высокосным, высокосным был 72-й поэтому надо сравнивать текущий год с остатком от деления на высокосный цикл и если разница равна 2 то добавлять рыбам еще один день влияния.

Теперь перебирая массив дат нужно по очереди отнимать от найденного числа 17532000 периоды влияния знаков. Если остаток получается меньше величины влияния знака то данный знак и есть искомый.

В результате работы скрипта мы узнаем что ASMO - лев

$a= array(
	array('козерог',1641600),	// 22.12-01.01
	array('водолей',2592000),	// 21.01-20.02
	array('рыбы',2419200),		// 21.02-20.03
	array('овен',2592000),		// 21.03-20.04
	array('телец',2505600),		// 21.04-20.05
	array('близнецы',2678400),	// 21.05-21.06
	array('рак',2592000),		// 22.06-22.07
	array('лев',2678400),		// 23.07-23.08
	array('дева',2592000),		// 24.08-23.09
	array('весы',2505600),		// 24.09-23.10
	array('скорпион',2505600),	// 24.10-22.11
	array('стрелец',2419200), 	// 23.11-21.12
	array('козерог',864000),	// 01.01-20.01
);

$birth = 175298400; // 1975-07-23
$a[2]['рыбы'] += floor(($birth % 126230400)/31536000) == 2 ? 86400 : 0;

$ostatok = ($birth % 126230400) % 31536000; 

foreach($a as $v)  {
	if($ostatok <= $v[1]) 
		break;
	$ostatok -= $v[1];	
}
echo $v[0];

Решил добавить еще тоже самое на JavaScript

var a = [
    ['козерог',1641600],	// 22.12-01.01
    ['водолей',2592000],	// 21.01-20.02
    ['рыбы',2419200],		// 21.02-20.03
    ['овен',2592000],		// 21.03-20.04
    ['телец',2505600],		// 21.04-20.05
    ['близнецы',2678400],	// 21.05-21.06
    ['рак',2592000],		// 22.06-22.07
    ['лев',2678400],		// 23.07-23.08
    ['дева',2592000],		// 24.08-23.09
    ['весы',2505600],		// 24.09-23.10
    ['скорпион',2505600],	// 24.10-22.11
    ['стрелец',2419200], 	// 23.11-21.12
    ['козерог',864000],		// 01.01-20.01
];

var birth = 175298400; // 1975-07-23

a[2][1] += Math.floor((birth % 126230400)/31536000) == 2 ? 86400 : 0;

var ostatok = (birth % 126230400) % 31536000;

for(var v in a)  {
    if(ostatok <= a[v][1])
        break;
    ostatok -= a[v][1];
}
alert(a[v][0]);

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

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

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

<input type="text" 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">

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

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

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

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

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

	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;
	}

	// получаем координаты поля куда надо ввести дату и выводим на его месте календарь, можно выводить под или над ним
	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. меня вот спросили чем эта библиотека лучше чем например вот эта - ответ может и не чем, просто она есть!