複製jQuery日期選取器

datepicker函數僅適用於所創建的第一個輸入框。複製jQuery日期選取器

我試圖通過克隆包含它的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>

要初始化的日期選擇器，根據jQuery UI documentation我只有這樣做$('#example').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。

來源

2008-08-29 Vitor Silva

我建議只使用普通的類名。但是，如果您出於某種原因違反此規定，您也可以編寫一個函數爲您的模板中的所有文本框創建日期選擇器（在每次複製後調用）div。例如：

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

來源

2008-08-29 17:51:03

我使用一個CSS類代替：

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

然後，在你document.ready功能：

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

使用它的方式對多個日曆字段爲我工作。

來源

2008-08-29 17:29:59

我也提供這種方式！ – 2012-10-10 06:49:30

我有一個非常類似的問題，經過幾個小時的測試，我找到了解決方案。我複製了一段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(); 
});

來源

2009-09-14 18:22:16

我不太瞭解示例代碼，但是您有一個好點 - 您需要刪除`.hasDatepicker`類，然後才能重新初始化日期選擇器。然後在克隆的元素上重新初始化datepicker，並且它工作正常。 – 2010-09-09 16:49:00

我克隆的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');

感謝亞勒。

來源

2012-02-08 18:36:59

複製jQuery日期選取器

回答

相關問題