Клонирование объектов DatePicker [JQuery] - PullRequest
Новая
       21

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

8 голосов
/ 01 марта 2010

У меня есть поле ввода, которое я определяю как указатель даты через класс 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>

Пока поле ввода дублируется и вставляется после последнего экземпляра, но средство выбора даты не работает. Я попытался передать 'true' в функцию клонирования, но я получил ошибку, сообщив, что inst не определен .

Любая помощь будет оценена :)

Ответы [ 4 ]

14 голосов
/ 01 марта 2010

Измените это на: 

$('.calendar:last').clone(false).removeClass('hasDatepicker').insertAfter('.calendar:last').datepicker();
5 голосов
/ 25 января 2011

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

редактирование:

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

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

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

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

0 голосов
/ 17 июня 2013

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

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

Решение:

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

Убедитесь, что ваш ввод примерно такой 

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

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

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

После того, как вы клонируете, добавьте также эти строки 

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

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

0 голосов
/ 16 января 2013

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

До: 

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

После того, как: 

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