jQuery UI: DatePicker

По результатам сегодняшнего труда решил написать небольшую обучаловку, которая я надеюсь станет первой из цикла статей про jQuery UI. Начнем я думаю с того, что констатируем, что все примеры в мануале немного недостаточны для создания полнофункционального работающего приложения, поэтому нужны такие вот обучаловки.

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

c по

jQuery(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: "calendar.gif", 
			// показываем картинку возле обоих input'ов
			showOn: "both",
			// убираем кнопку из под картинки
			buttonImageOnly: true 
		})
	);
});

13 Комментарии “jQuery UI: DatePicker

  1. Давеча очень пригодилось, такшо спасибо!) Только мне нужно было чтоб конечный период был не сегодня, а сегодня+неделя(+месяц, +пару недель — опционально) и так далее. Пришлось трошки переделать. А за идею и человеческие объяснения пасиба блин бальшое

  2. да, надо будет обновиться и проверить работоспособность примеров на сайте

  3. Клёво, спасибо.

    Hint: от половины телодвижений, можно избавиться, если выключить календарик, например, конца периода, включая его только в момент выбора начала периода..

  4. Долго смотрю уже на этот календарь, всё хочу себе такой же сделать на блоге, но никак не пойму, как его в ВП воткнуть, ведь мне не просто даты нужны, но и статьи, а их там нет :(

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

  5. Да я не нашел пока не на linkexchanger.su, с которого сюда и перешел, не на другом сайте подробные описания монтажа… Какой-то примерчик бы, пока я не научился в пхп. В принципе сесть и поковыряться можно самому, но это долгая история для меня, а так по аналогии быстро бы сообразил :)

    А у себя вы менять, смотрю, не стали :)

  6. ох уж эти СЕОшники. все им готовое подавай. ну ждите…

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

  7. Долго с РСС разбирался, так и не понял, где фидбёрнир обычный ??? :) пришлось на мыло и на Гугл.ридер (на всякий случай). Прикольно всплывает, кстати. Было б классно, если б вы разобрали плагинчик подобный. Открыл сейчас один — капец, для меня пока сложновато и не хочется еще один добавлять… всё стараюсь в тему запихнуть. :)

    Что хотелось бы видеть еще в календаре (если будет такая возможность у вас) выделить «выходные дни» и создать «свои» дни праздников в сео, копирайтинге и т.д., т.е. чтоб цифра была красной, а при наводке мыши показывались как сами топики (заголовки), так и события, праздники, например, День блога, День seo и т.д. Не знаю, возможно ли это? У буржуев видел подобные, но они сами как-то их клепали, а плагинов таких нет в доках ВП, по крайней мере я не нашел ничего интересного для себя.

  8. Я ничего не понял про рсс и ридер :(

    Посмотрите на календарик от YUI, думаю вам с ним проще будет

  9. А, всё… разобрался с РСС… Как-то сразу не сообразил. Просто мне удобней через Оперу подписаться, чем на мыло.

    Посмотрел, если позволите, ссылочку для незнающих оставлю (нашел в гугле): _http://developer.yahoo.com/yui/calendar/. Но там тоже не понятно, как в ВП всунуть, что для меня не легче (весь хелп скачал и перебрал — нет ВП). Я почти всю тему у себя сам перебрал вручную, но вот в «Архив» (лесенкой хотел сделать, чтоб раскрывался, как в плагине ДБ_Три) и в «Календарь» пока еще не лез, все поставил по умолчанию, как в самом движке. Чувствуется, придется выковыривать этот get_calendar() из темы и смотреть, что оно такое там :)

    Ладно, спасибо, извините, что дергаю… поковыряюсь сам пока, посмотрю где там да что, может, сам соображу, как новый себе прикрутить вместо стандартного.

  10. Про WP там конечно ничего нет, но там очень просто все — надо только передать список всех дат

    
    var myCalendar = new YAHOO.widget.Calendar("myCalendar", "myCalendarContainer", {selected:"1/1/2007,1/2/2007,1/3/2007"});
    

Комментарии закрыты