jQuery的日期選擇字段

我需要動態創建的輸入域日期選擇器幫...jQuery的日期選擇字段

我有這樣的形式：

<table id="reminder"> 
       <tr> 
       <th>Payment Reminders</th> 
       <th></th> 
       <th></th> 
       <th></th> 
       </tr> 
       <tr> 
        <td><label>Reminder</label></td>        
        <td><input type="text" name="payreminder[]" id="payreminder" class="input1" size="20" ><script>$('#payreminder').datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'}); </script></td> 
        <td><label>Description</label></td> 
        <td><input type="text" class="input1" name="paydescription[]" id="paydescription"></td> 
        <td> <a href="#" onClick="addReminder('dynamicInputReminder');" title="Add another">Add another</a></td> 
       </tr> 
        <tr> 
        <td colspan="6"><div id="dynamicInputReminder"></div> </td> 

       </tr> 


     </table>

而添加更多的提醒JavaScript是：

<script type="text/javascript" > 

var counterReminder = 1; 
var limit = 20;    
    function addReminder(divName){ 
    if (counterReminder == limit) { 
     alert("You have reached the limit of adding " + counterReminder+ " inputs"); 
     } 
     else { 
     var newdiv = document.createElement('div'); 
     newdiv.innerHTML = "<td><label>Reminder</label></td><td><input type=\"text\" id=\"payreminder["+counterReminder+"]\" name=\"payreminder["+counterReminder+"]\" class=\"input1\" ></td><td><label>Description</label></td><td><input type=\"text\" id=\"paydescription["+counterReminder+"]\" name=\"paydescription["+counterReminder+"]\" class=\"input1\"></td>"; 
     document.getElementById(divName).appendChild(newdiv); 
     counterReminder++; 
} 
} 
</script>

問題是：如何以及在哪裏可以調用日期選取器的腳本以使其適用於動態創建的字段？

<script>$('#payreminder').datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'}); </script>

非常感謝！

來源

2013-03-01 Lilou

使用的一類，而不是爲你的輸入欄的ID，例如

<input type=\"text\" id=\"payreminder["+counterReminder+"]\" name=\"payreminder["+counterReminder+"]\" class=\"payreminder\" > 

<script> 
    $(document).on('focusin', '.payreminder', function(){ 
     $(this).datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'}); 
    }); 
</script>

來源

2013-03-01 10:25:45

好吧，這工作完美！非常感謝 – Lilou 2013-03-01 10:29:56

試試這個：

<script type="text/javascript" > 

var counterReminder = 1; 
var limit = 20;    
function addReminder(divName) { 
    if (counterReminder == limit) { 
     alert("You have reached the limit of adding " + counterReminder+ " inputs"); 
    } else { 
     var newdiv = document.createElement('div'); 
     newdiv.innerHTML = "<td><label>Reminder</label></td><td><input type=\"text\" id=\"payreminder["+counterReminder+"]\" name=\"payreminder["+counterReminder+"]\" class=\"input1\" ></td><td><label>Description</label></td><td><input type=\"text\" id=\"paydescription["+counterReminder+"]\" name=\"paydescription["+counterReminder+"]\" class=\"input1\"></td>"; 
     document.getElementById(divName).appendChild(newdiv); 
     $(newDiv).find('input').datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'}); 
     counterReminder++; 
    } 
} 
</script>

來源

2013-03-01 10:19:02

我試過了，但沒有工作.. – Lilou 2013-03-01 10:23:44

您是否嘗試過我寫的內容？因爲我對你的最後一段代碼做了一些修改。 – 2013-03-01 10:26:57

是的，我已經複製粘貼在整個腳本 – Lilou 2013-03-01 10:28:04

$(document).on('focusin', 'input[id^=payreminder]', function(){ 
    $(this).datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'}); 
});

來源

2013-03-01 10:19:17 RRikesh

這個id選擇器不會工作。最後他增加了一個計數器，因爲會有多個選擇器。試試這個：''input [id^= payreminder]'' – 2013-03-01 10:23:02

謝謝你指出這一點。更正了答案 – RRikesh 2013-03-01 10:37:51

試試這個

刪除你的腳本，並把這個在代碼的結束。

注意：id應該始終是唯一的，所以我在這裏使用了class。

更改您的ID到類「payreminder」。

$(document).find('.payreminder').datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'});

來源

2013-03-01 10:24:19 bipen

上要添加日期選擇器，現在每次每個輸入字段添加一個名爲日期類，你添加新字段，呼叫以下功能

$(".date").datepicker();

來源

2013-03-01 10:27:58

jQuery的日期選擇字段

回答

相關問題