複製jQuery datepicker"を持つ

StackOverflow https://stackoverflow.com/questions/34790

  •  09-06-2019
  •  | 
  •  

質問

の datepicker 機能だけの最初の入力ボックスを作成します。

いった複数の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>

を初期化するdatepicker"を持つよ jQuery UIの書類 私だけで $('#example').datepicker(); ならではの作品が最初の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 でいます。

役に立ちましたか？

解決

されています。用の共通クラス名です。しかし、少なくともこの場をこれに対し何らかの理由でのように記述することもできます取り扱いに関する日無事完了すべてのテキストボックスにテンプレート div (後に呼ばれる毎に重複).のようなもの:

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

他のヒント

使えるCSSのクラス替り：

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

そして、お document.ready 機能：

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

利用にいかがでしょう複数のカレンダー分野の作品だった。

また同様の問題を長時間の試験から求めている。またコピーブロックのHTMLコードを挿入すると後部に含まれている、jQuery日付ピッカーカレンダーです。私が実現でしたが、jQuery UIのカレンダー変数を変更する機能を提供するクラスの要素の実行時の .datepicker() 機能です。その結果、ようとする時はコードをコピーし開始の新しいインスタンスのカレンダーのための新しい部失敗したものに従って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();
});

Htmlの私のクローニングは、複数の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');

コyall.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top