脚本内文本框中使用的日期选择器答案

【问题标题】：datepicker used in textbox inside script脚本内文本框中使用的日期选择器
【发布时间】：2017-03-15 10:10:05
【问题描述】：

当我在脚本外部的文本框中使用日期选择器时，它工作正常，看起来像这样。

<input type="text" id="entry_date" name="entry_date[]"  class="form-control datepicker" data-date-format="<?= config_item('date_picker_format'); ?>"  value=""/>

但是当我在脚本中使用相同的日期选择器函数时它不起作用，我不知道它是否会像我给出的那样工作。这是我的代码

<script type="text/javascript">
$(document).ready(function () {
 $(function () {    
        $("#datepicker1").datepicker();
    });

var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div  class="form-group"><input  class="form-control date_pick datepicker col-lg-2" id="datepicker1" placeholder="yyyy-mm-dd" type="text" name="entry_date[]" value=""/></div>'; //New input field html 


var x = 1; //Initial field counter is 1
$(addButton).click(function(){ //Once add button is clicked
    if(x < maxField){ //Check maximum number of input fields
        x++; //Increment field counter
        $(wrapper).append(fieldHTML); // Add field html
    }
});

});
</script>

你能解释一下我应该如何调用这个日期选择器吗？

谢谢

【问题讨论】：

1.不要使用重复的 ID 和 2. 添加元素时手动绑定数据选择器。
是在脚本里面吗

标签： javascript php jquery datepicker

【解决方案1】：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>

<button class="add_button">Add</button>
	<div class="field_wrapper"></div>
	<script type="text/javascript">
		$(document).ready(function () {
			var maxField = 10; //Input fields increment limitation
			var addButton = $('.add_button'); //Add button selector
			var wrapper = $('.field_wrapper'); //Input field wrapper
			var fieldHTML = ''; //New input field html 
			var x = 1; //Initial field counter is 1

			$(addButton).click(function(){ //Once add button is clicked
			    if(x < maxField){ //Check maximum number of input fields
			        x++; //Increment field counter
			        fieldHTML = '<div  class="form-group"><input  class="form-control date_pick datepicker col-lg-2" id="datepicker' + x + '" placeholder="yyyy-mm-dd" type="text" name="entry_date[]" value=""/></div>';
			        $(wrapper).append(fieldHTML); // Add field html
			        $("#datepicker" + x).datepicker();
			    }
			});
		});
	</script>

【讨论】：

我怀疑是否有两个字段意味着我们可以提供什么

【解决方案2】：

检查 html 是否正确附加，或者将 html 代码与 jquery 分开，可能在 datepicker 功能工作时使用最近附加的 jquery 代码。

问候，

【讨论】：