19

日付ピッカーがある div があります。次のようなものを使用してクローンを作成します。

mydiv = $('#someDiv');

// works fine so far
mydiv.find('input.datefield').datepicker();

// clone without the events and insert
newDiv = myDiv.clone(false).insertAfter(myDiv);

// datepicker won't re-init if this class is present
newDiv.find('.hadDatepicker').removeClass('hadDatepicker');

// reinitialize datepicker
newDiv.find('input.datefield').datepicker();

これは私のコードの簡素化されたバージョンです。それは機能し、カレンダーは期待どおりに期待どおりに表示されます..しかし、日付をクリックすると、以前の日付ピッカーの値が更新されます..（クローン元の値）。

このように（存在しない）インスタンスを破棄しようとしました：

newDiv.find('input.datefield').datepicker('destroy').datepicker();

運がない..

インスタンスを追跡する方法を確認し、次のようにデータを手動でクリアしました。

newDiv.find('input.datefield').data('datepicker', false).datepicker('destroy').datepicker();

まだ運がありません。

私が理解できないのは、日付選択の動作だけがバグであり、他のすべてが期待どおりに機能するということです。

他に何をチェックすればいいのか本当にわかりません..

4

12 に答える 12

42

これはjQuery UI 1.7.2で機能します

var mydiv = $('#someDiv');
mydiv.find('input.datefield').datepicker();
var newDiv = mydiv.clone(false).attr("id", "someDiv2").insertAfter(mydiv);
newDiv.find('input.datefield')
  .attr("id", "")
  .removeClass('hasDatepicker')
  .removeData('datepicker')
  .unbind()
  .datepicker();

簡単なデモについては、http://jsbin.com/ahoqa3/2を確認してください。

ところで。質問のコードにさまざまなエラーがあるようです。css クラスはそうではhasDatepickerなくhadDatepicker、ある時は書いたものmydivで、次回は変数がmyDivどちらであるかは同じではありません。

于 2010-03-14T11:24:09.283 に答える
27

ここに問題があります。datepickerは、初期化時にバインドする入力フィールドのUUIDベースのID属性を作成します。これらの要素のクローンを作成すると、同じID（jQueryが気に入らない）またはクローンルーチンが管理している場合は異なるID（つまり、datepickerがクローンを認識しない）の要素が増えます。つまり、datepickerは、呼び出し時にセレクターに一致するすべての要素のみを初期化します。クローンの作成に使用する関数内でinit呼び出しをラップできる場合は、実際には、破棄/無効化/有効化を何度も繰り返すことはあまり意味がありません。

私のクローン関数は通常、表示されているものではなく非表示のDOM要素からコピーするため、クローンの前または後にバインドする必要があるかどうかを判断する余裕があります。したがって、＃templateDivをページ上の非表示要素にして、INPUT要素がすでに存在するようにします。

mydiv = $('#templateDiv');
mydest = $('#someDiv');

function make_the_donuts() {
    newDiv = myDiv.clone(true).insertAfter(mydest);  
    // attach datepickers by instance rather than by class
    newDiv.find('input.datefield').datepicker();
}

そしてそれはほとんどそれをします。可能な限りクローン（true）を実行すると、長期的には頭痛の種を減らすことができます。

于 2010-03-26T22:43:35.767 に答える
8

複製する前に呼び出し.datepicker('destroy').removeAttr('id')てから、日付ピッカーを再初期化すると機能します。

要素を元の状態に戻すことになっているため、これは destroy のバグのようです。

于 2012-03-12T15:35:50.707 に答える
5

ただする

$('input.datefield').datepicker("destroy");

divを複製する前に。次に、クローンを挿入した後、datepicker を再度バインドします

$('input.datefield').datepicker();

一種の「ハック」ソリューションですが、完全に機能します。

于 2010-06-18T23:00:49.113 に答える
2 
$('input.datefield').datepicker("destroy");
$('input.datefield').datepicker();

それはうまくいきます。しかし、これを行うだけで、datepicker は複製された入力で開き、日付を元の入力に設定します (ID が同じであるため)。

これを解決するには、複製された入力の id 属性を変更する必要があります。

dp = < cloned input >
var d = $('input.vDateField');
dp.removeClass('hasDatepicker');
dp.attr('id', dp.attr('id')+d.length);
d.datepicker("destroy");
d.datepicker();

そしてそれはうまくいくでしょう！

于 2010-10-27T12:55:39.547 に答える
0

新しく複製された日付ピッカーの名前と ID が元のものと異なることを確認してください。両方が同じ名前である場合、説明している動作は正常です。

最後の行を次のように変更してみてください。

newDiv.find('input.datefield').attr('id', 'newDatePicker').attr('name', 'newDatePicker').datepicker();
于 2010-03-14T04:14:29.180 に答える
0

順番を変えてみてはどうですか？

mydiv = $('#someDiv');

// clone without the events and insert
newDiv = myDiv.clone(false).insertAfter(myDiv);

// datepicker won't re-init if this class is present
// not necessary anymore
// newDiv.find('.hadDatepicker').removeClass('hadDatepicker');

newDiv.find('input.datefield').datepicker();

// datepicker attached as a last step
mydiv.find('input.datefield').datepicker();

正直なところ、日付ピッカーが内部でどのように機能するかわかりません。私の推測では、jQuery DOM ストレージに何かが格納されます。真似は絶対にやめましょう。

(これらのコード行の間に長いビジネス ロジックがある場合があります。要点は、日付ピッカーを配置する前に #someDiv のバックアップを作成することです。)

于 2010-03-14T03:33:08.413 に答える
0

私のために働く完全なソリューション。

//before
$('input.fecha').datepicker("destroy");
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//change de input id
$("input.fecha").attr("id", function (arr) {return "fecha" + arr;});
//after
$('input.fecha').datepicker({defaultDate: "+1w",changeMonth: true,numberOfMonths: 1, showOn: "button", buttonImage: "<?php echo base_url() ?>images/calendar.gif", buttonImageOnly: true, showLabel:false, dateFormat:"yy-mm-dd"});

そしてhtml tdテーブル。

<td><?php echo form_input(array('name' => 'fecha','id' => 'fecha','class' => 'fecha')); ?></td>

これがお役に立てば幸いです。

良い一日

于 2012-11-07T22:39:59.003 に答える
0

これは少し遅れているかもしれませんが、上記の提案はすべてうまくいきませんでした。これに対する簡単な解決策を思いつきました。

まず、問題の原因: JQuery が datepicker を要素 ID に割り当てます。要素を複製する場合、同じ ID も複製される可能性があります。jQueryが嫌いです。どの入力フィールドをクリックしても、null 参照エラーが発生するか、日付が最初の入力フィールドに割り当てられる可能性があります。

解決：

1) datepicker を破棄する 2) すべての入力フィールドに新しい一意の ID を割り当てる 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++;
});

そして魔法が起こる

于 2013-06-17T16:55:45.080 に答える
0 
var dt = new Date();
var month = dt.getMonth();
var day = dt.getDate();
var year = dt.getFullYear()-5;
            $newClone.children().children("#fna"+clickID)
    .attr({
        'id': 'fna1'+newID,
        'name': 'fna'+newID,
        'value': day + '-' + month + '-' + year
    })
    .datepicker("destroy")
    .datepicker({
        firstDay: 1, 
        changeMonth: true, 
        changeYear: true,
        yearRange: 'c-100:c',
        defaultDate: '-1y',
        dateFormat: 'dd-mm-yy' ,
        nextText: "Mes siguiente",
        prevText: "Mes anterior",
        monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
        dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa']
    });
于 2012-12-19T09:22:59.313 に答える