同一表格上的多個日期選擇器

Question

同一表格上的多個日期選擇器 檢查我的小提琴。

http://jsfiddle.net/83xzT/1/

我需要的形式添加額外的線，我可以得到的日期選取器在第一個輸入工作。但是，我嘗試使用count i和追加實例名稱爲每個輸入添加額外的輸入不起作用。

任何想法或建議，將不勝感激。

Answer 1

簡單修復，移動

$("#datepicker" + i).datepicker(); 

到

$('#add').click(function() { 
    .... 
} 

塊，正上方第i ++;接下來是擺脫如果你的if/else塊，並只是讓它運行

$("#datepicker").datepicker(); 

on document.ready。

Answer 2

你只需要添加$("#datepicker" + i).datepicker();點擊函數內部

DEMO

Answer 3

場上只需使用一個類而不是ID：

<input type="text" name="date[]" class="field" class="datepicker" value=""/> 

然後改變你的附加功能是這樣的：

$('#add').click(function() { 
    $('... html tags ...').appendTo('.inputs').fadeIn('slow', function() { 
     $(".datepicker").datepicker(); 
    }); 
    i++; 
}); 

Answer 4

固定。 http://jsfiddle.net/83xzT/8/

var i = 1; 
$("#datepicker").datepicker(); 

$('#add').click(function() { 
    $('<div><span class="fieldset"><input type="text" name="date[]" class="field" id="datepicker' + i + '" value=""/> <select class="field" name="time[]"><option value="NULL">---Select Time ---</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select> <select class="field" name="timeframe[]"><option value="NULL">---Select A.M/P.M. ---</option><option value="am">A.M.</option><option value="pm">P.M.</option></select><input type="hidden" name="breaker[]" class="field" value=";"/></span></div>').fadeIn('slow').appendTo('.inputs'); 
     if(i >= 1) { 
      $("#datepicker" + i).datepicker(); 
     } 
    i++; 
});