jQuery. Вешаем два Datepicker на одной странице

Как вставить Datepicker на страницу? Погуглите, найдёте кучу материалов, которые фактически повторяют официальный мануал.

Общая суть их в следующем:

Вставить в head документа подключение нужных стилей и скриптов
Сделать на странице элемент с id="datepicker"
Активировать его

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

Делаем раз:

1
2
3

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Делаем два:

1	<div type="text" id="datepicker"></div>

или так

1	<input type="text" id="datepicker" name="???" value="???">

Делаем три:

  <script>
  $(document).ready(function() {
    $("#datepicker").datepicker();
  });
  </script>

Пока всё понятно.

Но если нам нужно сделать на странице два таких объекта? Можно конечно завести два объекта с id="datepicker", но ничего хорошего в этом нет. Как быть?

Элементарно же, Ватсон! Завести два элемента с разными id и активировать их по-отдельности. А ещё лучше юзать не id, а класс.

  <script>
  $(document).ready(function() {
    $(".datepicker").datepicker();
  });
....................
<input type="text" class="datepicker" name="???" value="???">
<input type="text" class="datepicker" name="???" value="???">
  </script>
 
..........................

PS: Это же просто, скажете вы! Но вот я сегодня пол-утра тупил над этим вопросом. Поэтому лучше запишу =)

Посты по теме:

Категории jQuery |
автор: altesack / Воскресенье, Апрель 24, 2011 / 4 комментов »

Вы можете оставить коммент, или сделать trackback с вашего блога.

4 комментов

Alexey пишет 21.05.2011 в 15:29

Действительно просто) Наверное не выспались)
А у меня вот друга проблема возникла – проверка jQuery Datepicker на обязательное заполнение с помощью JQuery Validation Engine. После выбора даты все равно выскакивает сообщение, что нужно заполнить дату, хотя отправка формы проходит нормально, как с заполненной.

jQuery(document).ready(function(){
$(”#formID”).validationEngine();

$.datepicker.setDefaults($.extend($.datepicker.regional["en"]));
$(”#datepicker1″).datepicker();
$(”#datepicker2″).datepicker();
});

Ну и поле соответственно типа такого (пишу одно только):

Побороть всплывающую подсказку о необходимости заполнения так и не получилось.
Нашел вариант: подставлять на лету в класс “validate[required]” после выбора даты (в событии onSelect Datepicker) – тогда нормально, не всплывает, но если не выбирать дату, тогда и класс validate[required] не подставится.
В общем, если знает кто – помогите, плииз)