Дублирование jQuery datepicker

Функция datepicker работает только в первом созданном окне ввода.

Я пытаюсь дублировать datepicker, клонируя div, который его содержит.

<a href="#" id="dupMe">click</a>
<div id="template">
  input-text <input type="text" value="text1" id="txt" />
  date time picker <input type="text" id="example" value="(add date)" />
</div>

Чтобы инициализировать datepicker, в соответствии с документации jQuery UI мне нужно сделать только $('#example').datepicker();, но это работает, но только на созданный первый создатель даты.

Код для дублирования div следующий:

$("a#dupMe").click(function(event){
  event.preventDefault();
  i++;
  var a = $("#template")
            .clone(true)
            .insertBefore("#template")
            .hide()
            .fadeIn(1000);
  a.find("input#txt").attr('value', i);
  a.find("input#example").datepicker();
});

Самое странное, что на document.ready у меня есть:

$('#template #example').datepicker();
$("#template #txt").click(function() { alert($(this).val()); });

и если я нажимаю на #txt, он всегда работает.

Ответы

Ответ 1

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

function makeDatePickers() {
  $("#template input[type=text]").datepicker();
}

Ответ 2

Вместо этого я использую класс CSS:

<input type="text" id="BeginDate" class="calendar" />
<input type="text" id="EndDate" class="calendar" />

Затем в вашей функции document.ready:

$('.calendar').datepicker();

Использование этого способа для нескольких полей календаря работает для меня.

Ответ 3

У меня была очень похожая проблема, которая после нескольких часов тестирования я нашел решение. Я копировал блок HTML-кода и вставлял его после раздела, в котором уже был календарь jQuery date picker. Сначала я не смог понять, что календарь jQuery UI изменяет класс элемента при выполнении функции .datepicker(). В результате, когда вы пытаетесь скопировать код и инициировать новый экземпляр календаря для этого нового раздела, он терпит неудачу, потому что в соответствии с CSS там уже есть один. Если вы попытаетесь использовать .datepicker('destroy'), это не приведет к уничтожению этого экземпляра-призрака, потому что он фактически не существует. Я решил проблему, сбросив класс элемента выбора даты в моем HTML, а затем добавив datepicker к этому элементу...

Ниже приведен код, который я использовал. Надеюсь, это поможет кому-то еще некоторое время...

$('#addaddress').click(function() {
  var count = $('.address_template').size();
  var html = $('.address_template').eq(0).html();
  $('#addaddress').before('<div class="address_template">' + html + '</div>');
  $('.address_template H1').eq(count).html("Previous Address " + count);
  $('.address_date').eq(count).attr("class","address_date");
  $('.address_date').eq(count).attr("id","movein" + count);
  $("#movein" + count).datepicker();
});

Ответ 4

В html, который я клонирую, есть несколько входов datepicker.

Используя ответ Райана Стемкоски и комментарий Alex King, я придумал это решение:

var clonedObject = this.el.find('.jLo:last-child')
clonedObject.find('input.ui-datepicker').each(function(index, element) {
    $(element).removeClass('hasDatepicker');
    $(element).datepicker();
});
clonedObject.appendTo('.jLo');

Спасибо yall.