Bootstrap DateTimePicker：一次打开一个日期时间选择器答案

【问题标题】：Bootstrap DateTimePicker: Open one datetimepicker at a timeBootstrap DateTimePicker：一次打开一个日期时间选择器
【发布时间】：2014-09-22 16:28:21
【问题描述】：

我有一个包含多个日期时间选择器的 html 模板。如果我单击按钮打开一个日期时间选择器，然后单击另一个打开新的，第一个保持不变（它不会关闭）。我希望一次只能打开一个日期时间选择器。

这是一个JsFiddle Demo

$('#datetimepicker1, #datetimepicker2').datetimepicker();

这是 bootstrap datetimepicker 2.5 在使用 moment 2.5 (moment-with-langs) 时的标准行为，但现在似乎不是那样工作了。

有没有人想办法解决这个问题？

注意：我使用 Eonasdan bootstrap-datetimepicker 版本 3.0.3 和 moment 2.8（moment-with-locales）、jQuery 1.9 和 Bootstrap 3

这里的棘手之处在于 bootstrap-datetimepicker 附加到 <body> 一个 <div> 对于每个与触发按钮完全无关的初始化的 datetimepicker。

【问题讨论】：

我已经尝试了几件事，甚至是绝望的措施，例如在“打开日期时间选择器按钮”单击时关闭所有日期时间选择器，然后触发单击同一按钮以打开特定选择器。这没有用。

标签： javascript jquery twitter-bootstrap datetimepicker bootstrap-datetimepicker

【解决方案1】：

试试这个：

$('.date').datetimepicker();
$(document).ready(function() {
    // Select all elements with the 'date' class
    $('.date').on('dp.show', function() {
        $('.date').not($(this)).each(function() {
            $(this).data("DateTimePicker").hide();
            // $('.date').not($(this)) selects all the .date elements except
            // for the one being shown by the datetimepicker dp.show event.
            // The dp.show event is fired when a new datetimepicker is opened.
            // We use the .data("DateTimePicker") to access the datetimepicker object
            // (we have to use a jQuery each loop in order to access all the 
            // datetimepickers.
            // .hide() -- we hide it.
        });
    });
});

这应该只允许一次打开一个日期时间选择器。

【讨论】：

所以我理解正确......您能否详细说明一下为什么会这样以及为什么数据值必须完全是“DateTimePicker”？
如果您查看源代码（靠近底部），您将看到 $.fn.datetimepicker = function (options) { return this.each(function () { var $this = $(this), data = $this.data('DateTimePicker'); if (!data) { $this.data('DateTimePicker', new DateTimePicker(this, options)); } }); }; 这似乎暗示“DateTimePicker”是库的作者选择存储 datetimepicker 对象的关键.我绝不是 javascript 专家，但希望这有助于回答您的部分问题。
至于代码工作的原因，请参阅上面的我的 cmets。
总比好。我只是在那里与“DateTimePicker”作斗争，但现在一切都清楚了。非常感谢。干杯。
我再次乔尔...我在等式中添加了另一个日期时间选择器，现在它不适用于您的方法：/...任何想法为什么？ jsfiddle.net/kmbo576p/415

【解决方案2】：

虽然 Joel Lubrano 的答案适用于预加载的小部件......但它缺乏使用动态生成的小部件（通过 JS）的可能性。同时，我设法从组件内部解决了这个问题，通过添加一行来解决这两个问题。

在组件的 JS 中找到 picker.show 函数（大约第 1150 行，取决于版本（v1.3.1 中的 this））... 在该函数的最后一个 else 语句中，将以下行作为该函数的第一条指令声明。

$('.picker-open').hide().removeClass('picker-open');

就是这样。之后，您只需将 DTP 初始化封装在一个函数中，并在文档准备好和动态生成的小部件之后调用它。

function DTPinit(){
    $('.dtp').datetimepicker();
}

$(function(){
    DTPinit();
    $('#dtp_gen').on('click', function(){
        $('body').append('<div class="form-group"><div class="input-group dtp date""><input type="text" class="form-control datetimepicker" /><span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div></div>');
        DTPinit();
    });
});

这里有一个JSFiddle，说明了我在上面描述的内容。 BS-DTP 组件正在 fiddle JS 容器中加载以进行编辑。

【讨论】：