Duplizieren des jQuery-Datumswählers

Question

Der datepicker Funktion funktioniert nur für das erste Eingabefeld, das erstellt wird.

Ich versuche, einen Datepicker zu duplizieren, indem ich ihn klone div das enthält es.

<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>

Um den Datepicker entsprechend zu initialisieren jQuery-UI-Dokumentation Ich muss nur tun $('#example').datepicker(); und es funktioniert, aber nur beim ersten Datepicker, der erstellt wird.

Der Code zum Duplizieren div ist das Folgende:

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

Das Seltsamste ist, dass auf der document.ready Ich habe:

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

und wenn ich auf klicke #txt es funktioniert immer.

Answer 1

Ich würde auch empfehlen, einfach einen gemeinsamen Klassennamen zu verwenden.Wenn Sie jedoch aus irgendeinem Grund dagegen sind, können Sie auch eine Funktion schreiben, um Datumsauswahlen für alle Textfelder in Ihrer Vorlage zu erstellen div (wird nach jeder Vervielfältigung aufgerufen).Etwas wie:

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

Answer 2

Ich verwende stattdessen eine CSS-Klasse:

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

Dann, in deinem document.ready Funktion:

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

Es funktioniert für mich, es auf diese Weise für mehrere Kalenderfelder zu verwenden.

Answer 3

Ich hatte ein sehr ähnliches Problem, für das ich nach stundenlangem Testen eine Lösung gefunden habe.Ich habe einen HTML-Codeblock kopiert und ihn nach einem Abschnitt eingefügt, der bereits einen jQuery-Datumsauswahlkalender enthielt.Was mir zunächst nicht klar war, war, dass der Kalender der jQuery-Benutzeroberfläche die Klasse des Elements ändert, wenn er ausgeführt wird .datepicker() Funktion.Das Ergebnis ist, dass der Versuch, den Code zu kopieren und eine neue Instanz des Kalenders für diesen neuen Abschnitt zu initiieren, fehlschlägt, da es laut CSS bereits eine gibt.Wenn Sie versuchen, es zu verwenden .datepicker('destroy') Dadurch kann diese Geisterinstanz nicht zerstört werden, da sie tatsächlich nicht existiert.Ich habe das Problem gelöst, indem ich die Klasse des Datumsauswahlelements in meinem HTML zurückgesetzt und dann die Datumsauswahl zu diesem Element hinzugefügt habe ...

Unten ist der Code, den ich verwendet habe.Hoffentlich spart das jemand anderem etwas Zeit ...

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

Der HTML-Code, den ich klone, verfügt über mehrere Datepicker-Eingaben.

Anhand der Antwort von Ryan Stemkoski und des Kommentars von Alex King bin ich auf diese Lösung gekommen:

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');

Danke euch allen.