日期选择器（引导程序）不起作用？答案

【问题标题】：Does not work datepicker (Bootstrap)?日期选择器（引导程序）不起作用？
【发布时间】：2014-12-06 20:22:00
【问题描述】：

要显示在输入 - 日历（datepicker (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();

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

【问题讨论】：

您是在使用 ajax 创建模态窗口元素吗..
不，只是在 jquery append() ...
在 jQuery 追加之后，调用这个 $(".datepicker_goal_modal").datepicker();
我认为你遗漏了一些东西，因为你没有发布所有相关代码，我创建了一个具有类似模式的 jsFiddle。检查我的答案以与您的代码进行比较

标签： javascript jquery twitter-bootstrap datepicker

【解决方案1】：

这是工作的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();

【讨论】：

【解决方案2】：

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

这应该可行。它之前不会出现的原因是因为您正在动态创建模式，并且元素选择器功能仅适用于页面首次加载时存在的元素。

【讨论】：