我只是 php 的初学者。 当我单击按钮时，我需要动态添加更多日期选择器。我输入了代码，但是当我单击按钮时，我得到新的文本框而不是日期选择器。请检查我的代码并告诉我错误在哪里以及我必须做什么这是我的代码，
<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="css/datepicker.css">
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newdatepicker = $(document.createElement('div'))
.attr("id", 'datepicker' + counter);
newdatepicker.after().html('<label> #'+ counter + ' : </label>' +
'<input class= name="date' + counter +
'" id="dateid' + counter + '" value="" >');
newdatepicker.appendTo("#date");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#datepicker" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n date #" + i + " : " + $('#date' + i).val();
}
alert(msg);
});
});
</script>
<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('.input-daterange').datepicker({
todayBtn: "linked"
});
});
</script>
<div id='date'>
<div class="hero-unit">
<div class="input-daterange" id="datepicker1" >
<span class="add-on" style="vertical-align: top;height:20px">Select Leave Date:</span>
<input type="text" class="input-small" name="date" id="dateid"/>
</div>
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</body>
</html>最佳答案
页面加载时，您可以在当时找到的元素上初始化日期选择器插件:
$(document).ready(function () {
$('.input-daterange').datepicker({
todayBtn: "linked"
});
});
但是你永远不会在后来添加的新元素上初始化它。因此，当您添加新元素时:
newdatepicker.appendTo("#date");
这只是创建的未初始化元素。该插件从未被告知过。您需要在其上运行插件。
由于代码创建了 id 值，因此您可以在添加元素后立即使用该值来定位该元素。也许是这样的:
newdatepicker.appendTo("#date");
$('#dateid' + counter).datepicker({
todayBtn: "linked"
});
关于javascript - 动态添加/删除日期选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28480580/