Bootstrap datepicker + 后输入框不起作用

Question

我正在使用引导日期选择器。我需要显示多个日期选择器。

HTML代码：

<div class="content">
<input type="text" class="dateRangePicker" value=""/>
</div>
<div><button name="clone" value="clone"></button></div>

js代码：

$(document).ready(function() {
$(".dateRangePicker").datepicker({
            format : 'yyyy-mm-dd',
            startDate : new Date(),
            autoclose : true,

        });     
$("button").click(function(){
var clone = $('.dateRangePicker').clone();
$('.content').append(clone);
});

});

单击按钮后，dateRangePicker 克隆将附加到内容 div。 错误：附加输入框日期选择器不起作用。 预期：为所有需要工作的日期选择器附加文本框后

Answer 1

如下初始化datepicker，将其附加到动态创建的元素上：

DEMO

$('body').on('focus',".dateRangePicker", function(){
      $(this).datepicker({
            format : 'yyyy-mm-dd',
            startDate : new Date(),
            autoclose : true
      });
});

注意 - 如果 $('body') 不适合您[有可能]，请使用 $(document)

Answer 2

在您的代码中，您正在使用代码初始化日期选择器

$(".dateRangePicker").datepicker({
        format : 'yyyy-mm-dd',
        startDate : new Date(),
        autoclose : true,

    }); 

您还需要在克隆 HTML 后通过单击按钮调用此代码以初始化新的日期选择器。