datepicker（Bootstrap）不起作用？

Question

要在输入中显示-日历（日期选择器（Bootstrap））。 问题在于，在前一种情况下，它显示为：

<input type="text" class="datepicker_goal" data-provide="datepicker" value="Period">

$('.modal-body input[data-provide="datepicker"]').datepicker();

但是当您激活另一个表单标签并添加时，我创建了一个模态窗口：

<input type="text" class="datepicker_goal_modal" data-provide="datepicker_modal" value="Period">

$('.modal-body input[data-provide="datepicker_modal"]').datepicker();

但是在第二实施例中，日期选择器没有被激活并且日历是不可见的。 甚至发生冲突，也会关闭模式窗口。 告诉我我做错了什么以及如何解决？ 如何以所有字段模式形式显示日历？

Answer 1

$('body').on('focus', '.datepicker_goal_modal', function(){
    $(this).datepicker();
});​

这应该工作。 它之所以不会出现是因为您正在动态创建模式，而元素选择器功能仅对首次加载页面时存在的元素起作用。

Answer 2

这是工作中的Jsfiddle供参考。 它具有模式弹出窗口和附加到输入字段的日期选择器。

$('input[data-provide="datepicker"]').datepicker();    

// Append New Input field
$("div.modal-body").append(" <input type=\"text\" class=\"datepicker_goal_modal\" data-provide=\"datepicker_modal\" placeholder=\"Period\">")

// After appending, call datepicker on input field.
$('.modal-body input[data-provide="datepicker_modal"]').datepicker();