Bootstrap DateTimePicker：一次打开一个datetimepicker

Question

我有一个带有多个datetimepickers的html模板。 如果我单击按钮打开一个datetimepicker，然后单击另一个以打开新的，则第一个保持不变（它不会关闭）。 我希望一次只能打开一个datetimepicker。

这是一个JsFiddle演示

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

这是bootstrap datetimepicker 2.5的标准行为，当时处理时刻2.5（与langs一起），但现在似乎没有像那样工作。

有没有人有任何想法来解决这个问题？

注意：我正在使用Eonasdan bootstrap-datetimepicker版本3.0.3，时刻2.8（与语言环境一起使用），jQuery 1.9和Bootstrap 3

这里有一点很棘手的是bootstrap-datetimepicker为每个初始化的datetimepicker追加<body>一个<div> ，它与它的触发按钮完全无关。

Answer 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。

Answer 2

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

在组件的JS里面找到了picker.show函数（在1150行左右，具体取决于版本（在v1.3.1中））...在该函数的最后一个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组件正在小提琴JS容器中加载以进行编辑。

Bootstrap DateTimePicker：一次打开一个datetimepicker

问题描述

2 个解决方案

解决方案1
5 2014-09-22 17:14:57

解决方案2
1 已采纳 2014-10-03 09:40:50

Bootstrap DateTimePicker：一次打开一个datetimepicker

问题描述

2 个解决方案

解决方案1 5 2014-09-22 17:14:57

解决方案2 1 已采纳 2014-10-03 09:40:50

解决方案1
5 2014-09-22 17:14:57

解决方案2
1 已采纳 2014-10-03 09:40:50