Почему все мои поля обновляются, когда я меняю один?

Question

Я использую JQuery datepicker , и проблема в том, что я генерирую HTML, поэтому я не знаю заранее идентификаторы полей.

Мой код можно попробовать по адресу http://jsfiddle.net/littlesandra88/KrEqk/

Формы ниже генерируются, где идентификаторы просто префикс со случайным числом, чтобы отличать их.

Что я сделал, чтобы получить указатель даты в этих полях, так это добавить class="datepick" к этим полям, например,

<input name="from" id="114_begin_date" value="16/05-2011" type="text" class="datepick" />
<input name="to"   id="114_end_date"   value="16/05-2011" type="text" class="datepick" />

и добавьте .datepick во встроенный JavaScript-модуль выбора даты, например

var dates = $("#from, #to, .datepick").datepicker({         

Если вы попытаетесь изменить даты несколько раз, вы заметите, что все поля обновлены = (

Как мне предотвратить это, чтобы изменить только поле, на которое я нажимаю?

Answer 1

Проблема в обработчике onSelect

Вы работаете

dates.not(this).datepicker("option", option, date);

при этом все другие средства выбора даты изменяются на одно значение ( значение текущего средства выбора даты ) ..

---

Обновление для комментария

измените свой onSelect метод на

onSelect: function(selectedDate) {
                  var self = this;
                  var option = this.name == "from" ? "minDate" : "maxDate",
                  instance   = $(this).data("datepicker"),
                  date       = $.datepicker.parseDate(
                                  instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                  dates.filter(function(){return this.form === self.form;}).not(this).datepicker("option", option, date);
               } 

внесенные изменения

1. добавлено var self = this; для последующего использования
2. используйте атрибут name вместо id, чтобы решить, какой предел использовать
3. вместо применения нового предела даты ко всем другим средствам выбора даты ( я предполагаю, что вы взяли эту часть откуда-то, где существовало только два средства сбора данных ), мы отфильтровываем их до тех, которые находятся в той же форме, что и тот, который мы изменили. ( в действительности другой, в той же строке. Имейте в виду, что это работает только для двух сборщиков дат для форм с именами from и to)

демо на http://jsfiddle.net/gaby/Wy6qT/

Answer 2

Хм, я не знаком с DatePicker, но вы можете попробовать:

$("#from, #to, .datepick").each(
    $(this).datepicker({/*... some settings? */});
}