Question

我只是php的初学者。当我点击一个按钮，我需要动态添加更多的日期选择器。我把代码，但当我点击按钮我得到新的文本框而不是date-picker.plz检查我的代码，并告诉我哪里是错误，我有什么这是我的代码，

＆＃13;

<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>

＆＃13;

Answer 1

当页面加载时，您在当时找到的元素上初始化日期选择器插件：

$(document).ready(function () {
    $('.input-daterange').datepicker({
        todayBtn: "linked"
    });
});

但是你永远不会在以后添加的新元素上初始化它。所以当你添加一个新元素时：

newdatepicker.appendTo("#date");

这只是创建的未初始化元素。该插件从未被告知过它。你需要在它上面运行插件。

由于代码会创建id值，因此您只需使用该值即可在添加元素后立即对其进行定位。也许是这样的：

newdatepicker.appendTo("#date");
$('#dateid' + counter).datepicker({
    todayBtn: "linked"
});

动态添加/删除datepicker

1 个答案: