www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Веб-дизайн и поисковая оптимизация

Логотип Софт

Создание формы обратной связи

Вывод на сайте календарей с двумя зависимыми датами

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

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

Дата заезда: Дата выезда:

Для простой реализации такого вывода даты достаточно при установке календаря вставить в тег <head>...</head> следующий скрипт инициализации календаря:

<script type="text/javascript" >
$(function() {
$( "#from" ).datepicker({
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>

Далее в HTML-коде вызова календарей необходимо указать id="from" для первого и id="to" для второго календаря. Для нашего примера это будет выглядеть так:

<p>Дата заезда: <input type="text" id="from" />
Дата выезда: <input type="text" id="to" /></p>

В нашем примере введены некоторые дополнительные параметры календаря, подробнее о которых смотрите в статье "Изменение стилей и настройки календаря":

changeMonth: false, // выпадающий список месяцев
changeYear: false, // выпадающий список лет
minDate: "0", // кол-во задания дней назад
maxDate: "1y", // кол-во задания дней вперед - один год
defaultDate: null, // подсветка текущей даты
duration: "normal", // длительность анимации ввода/вывода календаря
showAnim: "show".// тип анимации ввода/вывода календаря

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

24.11.2014 г.

Задать вопрос автору





Яндекс.Метрика

Copyright © 2008 - Марк Розенталь e-mail: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: создание формы обратной связи, календарь в форме обратной связи, скачать форму обратной связи, ввод даты в форме обратной связи, выпадающий календарь