Bootstrap DateTimePicker:一次打开一个日期时间选取器

Bootstrap DateTimePicker: Open one datetimepicker at a time

本文关键字：日期 一个 时间 选取 一次 DateTimePicker Bootstrap      更新时间：2023-09-26

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

这是一个 JsFiddle 演示

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

这是引导日期时间选择器 2.5 在使用时刻 2.5(时刻与语言(时的标准行为，但现在它似乎不是那样工作的。

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

注意：我正在使用Eonasdan bootstrap-datetimepicker version 3.0.3，带有moment 2.8(moment-with-locales(，jQuery 1.9和Bootstrap 3

这里棘手的是，bootstrap-datetimepicker 会附加到为每个初始化的日期时间选择器<body>一个与其触发按钮完全无关的<div>。

试试这个：

$('.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.
        });
    });
});

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

尽管乔尔·卢布拉诺的答案适用于预加载的小部件......它缺乏使用动态生成的(通过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 容器中以进行编辑。

相关文章：