дублирование JQuery DatePicker

Question

Функция 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>

Чтобы инициализировать средство выбора даты, согласно документации 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, он всегда будет работать.

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

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

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

$('#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();
});

Answer 4

HTML-код, который я клонирую, содержит несколько входов DatePicker.

Используя ответ Райана Стемкоски и комментарий Алекса Кинга, я нашел следующее решение:

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.