jQueryのdatepickerを複製する

Question

datepicker関数は、作成される最初の入力ボックスでのみ機能します。

私は、それを含むdivを複製することによって、datepickerを複製しようとしています。

<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 documentationによるだけで作成された最初の日付ピッカーで、私は$('#example').datepicker();を行う必要があり、それが作業を行います。

divを複製するコードは次のとおりです。私はそれは常に働く#txtをクリックした場合

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

をして：

$("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に私が持っているということです。

Answer 1

共通のクラス名を使用することをお勧めします。しかし、何らかの理由でこれに反するのであれば、テンプレートdiv（各複製の後に呼び出される）のすべてのテキストボックスの日付ピッカーを作成する関数を書くこともできます。ような何か：

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

Answer 2

私の代わりにCSSクラスを使用します。

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

次に、あなたのdocument.ready機能に：

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

複数のカレンダーフィールドのその方法は、私の作品にそれを使用します。

Answer 3

は、私はテストの時間後、私は解決策を見つけた非常によく似た問題を抱えていました。私は、HTMLコードのブロックをコピーして、すでにjQueryの日付ピッカーカレンダーを含むセクションの後に挿入していました。私が最初に気づかなかったのは、.datepicker()関数を実行するときにjQuery UIカレンダーが要素のクラスを変更することでした。その結果、コードをコピーして、その新しいセクションのカレンダーの新しいインスタンスを開始しようとすると、失敗します。これは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(); 
}); 

Answer 4

私はクローニングに複数のdatepicker入力があります。ライアンStemkoskiの答えとアレックス王のコメントを使用して

は、私はこの解決策を考え出した：

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

おかげヤオール。