Question

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

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

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();

不起作用datepicker（Bootstrap）？

2 个答案: