[英]jquery datepicker on dynamic input fields
I need help with datepicker on dynamic created input fields...我需要有关动态创建的输入字段的日期选择器的帮助...
I have this form:我有这个表格:
<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>
And the javascript for adding more reminders is:添加更多提醒的 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>
The question is: How and where can I call the script bellow for the date picker so that it works for the dynamically created fields ?问题是:我如何以及在何处为日期选择器调用下面的脚本,以便它适用于动态创建的字段?
<script>$('#payreminder').datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'}); </script>
Thanks a lot!非常感谢!
Use a class instead of an id for your input field, for example例如,为您的输入字段使用类而不是 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>
try this试试这个
remove your script and put this at the end of the code.删除您的脚本并将其放在代码的末尾。
NOTE: id should always be unique so i used class here.注意:id 应该总是唯一的,所以我在这里使用了 class。
change you ids to class "payreminder".将您的 ID 更改为“payreminder”类。
$(document).find('.payreminder').datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'});
Try this:试试这个:
<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>
$(document).on('focusin', 'input[id^=payreminder]', function(){
$(this).datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'});
});
在要添加日期选择器的每个输入字段上添加一个名为 date 的类,现在每次添加新字段时,调用以下函数
$(".date").datepicker();
Alternatively, you could use a data-
attribute for each input instead of a class.或者,您可以为每个输入使用data-
属性而不是类。 The following initializes any datepicker <input type="text" data-datepicker ...>
tags as soon as the page is loaded, and then can be called again after the new reminder is added.以下内容在页面加载后立即初始化任何 datepicker <input type="text" data-datepicker ...>
标签,然后可以在添加新提醒后再次调用。
function initDatePicker () {
$("input[data-datepicker]").datepicker();
};
$(document).ready(initDatePicker());
Additionally, I've found it to be useful to call the destroy() method for all the datepicker <input>
's each time you reinitialize them;此外,我发现每次重新初始化所有 datepicker <input>
调用 destroy() 方法很有用; otherwise, they seem to break.否则,它们似乎会破裂。 I used something like the following:我使用了以下内容:
function addReminder(divName){
...
$("input[data-datepicker]").datepicker('destroy');
initDatePicker();
...
};
Obviously, make sure you call datepicker('destroy')
before you call initDatePicker()
, or you'll wipe out all your datepickers every time you add a new reminder.显然,请确保在调用initDatePicker()
datepicker('destroy')
之前调用initDatePicker()
datepicker('destroy')
,否则每次添加新提醒时都会清除所有日期选择器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.