Bootstrap DateTimePicker:一次打开一个datetimepicker

hen*_*ser 3 javascript jquery datetimepicker twitter-bootstrap bootstrap-datetimepicker

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

这是一个JsFiddle演示

$('#datetimepicker1, #datetimepicker2').datetimepicker();
Run Code Online (Sandbox Code Playgroud)

这是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>与其触发按钮完全无关的.

Joe*_*ano 5

试试这个:

$('.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.
        });
    });
});
Run Code Online (Sandbox Code Playgroud)

这应该只允许一次打开一个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专家,但希望这有助于回答你的部分问题. (2认同)