Клонирование объектов datepicker [JQuery]

У меня есть поле ввода, которое я определяю как datepicker через класс css. Теперь я хочу клонировать это поле ввода и сделать так, чтобы клонированные входы также были датапикерами.

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

<input type="text" id="date" name="date" class="calendar" />
<input type="button" id="clone" name="clone" value="Clone dates" />

А вот и javascript: 

<script type="text/javascript">
$(document).ready(function(){

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

 $('#clone').click(function()
 {
  $('.calendar:last').clone().append().insertAfter('.calendar:last');
 });

});

</script>

До сих пор поле ввода дублируется и вставляется после последний экземпляр, но datepicker не работает. Я попытался передать' true ' функции clone, но она дала мне ошибку, сказав, что inst не был определен.

Любая помощь будет признательна :)

4 8
jquery jquery-ui-datepicker

4 ответа:

Измените его следующим образом: 

$('.calendar:last').clone(false).removeClass('hasDatepicker').insertAfter('.calendar:last').datepicker();
14

К плохому я больше не могу комментировать ответ, данный выше, но код все еще фальшивый! Элемент datepicker отображается в клонированном элементе ввода, но использует выбранное значение даты в исходном поле ввода и оставляет клонированное поле ввода пустым .. Есть предложения?

Правка:

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

$('.datum',clone).removeClass("hasDatepicker").attr('id',"").datepicker();

(Обратите внимание, что я клонировал оболочку и нацелен только на поле ввода "datum" в этой оболочке)

После удаления класса как предложенный выше, я также удаляю id клонированного входного элемента. Это то же самое, что и оригинал, поэтому я обновил исходное поле ввода с выбранной датой в окне datepicker.

5

Я внес следующие изменения, и это работает.

До: 

 $('#clone').click(function()
 {
  $('.calendar:last').clone().append().insertAfter('.calendar:last');
 });

После: 

 $('#clone').click(function()
 {
  $('.calendar:last').clone().append().insertAfter('.calendar:last').attr('id',"");
 });
0

Это может быть немного поздно, но все предложения выше не сработали для меня, я придумал простое решение для этого.

Во-первых, что вызывает проблему: JQuery присваивает datepicker идентификатор элемента. если вы клонируете элемент, то тот же идентификатор может быть также клонирован. который в jQuery не нравится. В конечном итоге вы можете получить либо ошибку null reference, либо дату, назначенную первому полю ввода, независимо от того, какое поле ввода вы нажмете.

Решение:

1) уничтожить элемент управления datepicker 2) назначить новые уникальные идентификаторы для всех полей ввода 3) назначить datepicker для каждого входа

Убедитесь, что ваш ввод выглядит примерно так

<input type="text" name="ndate[]" id="date1" class="n1datepicker">

Прежде чем клонировать, уничтожьте datepicker 

$('.n1datepicker').datepicker('destroy');

После клонирования добавьте также Эти строки

var i = 0;
$('.n1datepicker').each(function () {
    $(this).attr("id",'date' + i).datepicker();
    i++;
});

И происходит волшебство

0