JQuery проблемы с различными датчиками на одной странице

Question

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

Обычный указатель даты привязан к элементу div (т. е. это встроенный указатель даты), тогда как остальные привязаны к входным данным.Есть веская причина, по которой у меня есть один указатель даты, связанный с элементом div: мне нужно иметь возможность перетаскивать на него элементы с помощью перетаскивания и отбрасывания, что невозможно с помощью всплывающего окна выбора даты «всплывающее окно».

ТеперьЯ видел в сообщении на ExpertsExchange, что после инициализации одного экземпляра DatePicker его параметры будут автоматически применяться к любому другому экземпляру, если вы не укажете их для более поздних.Но в моем случае кажется, что все запутано: события, указанные для одного элемента, будут запускаться для другого, встроенный указатель даты появится после того, как я закрою всплывающее окно выбора даты и т. Д.

Я еще не включил реальный кодпотому что их много, и мне хотелось бы сначала узнать, не хватает ли у меня общего принципа, такого как «Datepicker не позволяет одному параметру иметь разные значения для разных экземпляров, потому что ...» или «Не смешивать встроенныйи всплывающие подсказки, потому что ... "или что-то в этом роде.

Но моя общая идея в CodeSpeak:

$('div#mainDatePicker').datepicker({
  //options for main (inline) datepicker, doubling as defaults for any subsequent datepickers
})

$('input#selectStartDate').datepicker({
  //specific options for this datepicker, where different from the main one
})

Спасибо за любую помощь!

Wytze

Answer 1

Если вы используете $('.someclass).datepicker(); и $('.anotherclass).datepicker(), это будет работать.

Если вы используете:

$('.someclass').each(function() {
   $(this).datepicker();
});

это не будет работать.

Произойдет то, что сказал Алекс П.

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

Неважно, какой идентификатор вы используете. Вы можете использовать случайные сгенерированные уникальные идентификаторы. Ниже приведен пример:

$('.someclass').each(function() {
   $('#' + $(this).attr('id')).datepicker();
});

Answer 2

Я немного поработал с несколькими сборщиками дат на одной и той же странице и получал неожиданные результаты, пока не понял, что каждый сборщик дат должен иметь уникальный идентификатор.

Например, предположим, что вы хотите связать указатель даты с двумя похожими кнопками ввода. Следующее может вызвать проблемы:

<input type="text" class="myCustomDatePicker">
<input type="text" class="myCustomDatePicker">

Например, если вы установили дату, используя второй DatePicker, выбранная дата появится в поле ввода первого поля ввода.

Вместо этого, установка id обеспечит независимую работу каждого средства выбора даты:

<input type="text" class="myCustomDatePicker" id="dp1">
<input type="text" class="myCustomDatePicker" id="dp2">

Не знаю, помогает ли это, но просто кое-что проверить, я думаю, при использовании нескольких сборщиков дат на одной странице

Answer 3

виджет DatePicker пользовательского интерфейса jQuery ссылается на идентификатор Атрибут html, к которому вы его прикрепили. Таким образом, чтобы использовать более одного DatePicker Вы должны быть уверены, что идентификаторы каждого DatePicker разные.

So you want to end up with the following HTML:

<input id="form-date-1" type="text" />
<input id="form-date-2" type="text" />
<script type="text/javascript">
  $("#form-date-1").datepicker();
  $("#form-date-2").datepicker();
</script>

проверьте эту статью: http://mike -abner.posterous.com / множественные jquery-ui-datepickers-on-the-же-pa

Answer 4

У меня был этот вопрос один раз (для формата даты).Может быть, вы можете привязать его по клику, как:

$('div#mainDatePicker').click(function(){
    $(this).datepicker({
        //options for main (inline) datepicker, doubling as defaults for any subsequent datepickers
    })
})

$('input#selectStartDate').click(function(){
    $(this).datepicker({
        //specific options for this datepicker, where different from the main one datepickers
    })
})