Bootstrap DateTimePicker: Opens one datetimepicker at a time
I have an html template with more than one datetimepickers. If I click a button to open one datetimepicker, and after that click on another to open a new one, the first one stays the same (it doesn't close). I want to be able to only open one datetimepicker at a time.
Here's the JsFiddle Demo
$('#datetimepicker1, #datetimepicker2').datetimepicker();
This was the standard behavior for bootstrap datetimepicker 2.5 when working with moment-with-langs, but now it doesn't seem to work.
Does anyone have any ideas on how to fix this problem?
Note. I am using Eonasdan bootstrap-datetimepicker version 3.0.3 with moment 2.8 (moment-with-locales), jQuery 1.9 and Bootstrap 3
What a tricky thing is that bootstrap-datetimepicker adds to <body>
a <div>
for every initialized datetimepicker that is completely unrelated to its launch button.
source to share
While Joel Lubrano's answer works as intended for pre-installed widgets ... it lacks the ability to work with dynamically generated ones (via JS). In the meantime, I managed to get around this issue from within the component, solving both problems by adding one line.
Inside the JS component, find the function picker.show
(around line 1150 depending on the version (that's in version 1.3.1)) ... inside the last expression of that function, put the following line as the first statement of that statement.
$('.picker-open').hide().removeClass('picker-open');
and what he is. After that, you only need to encapsulate the DTP initialization inside the function and call it on the finished document and after the dynamically created widgets.
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();
});
});
Here's a JSFiddle demonstrating what I am describing above. The BS-DTP component is loaded inside a JS script container for editing purposes.
source to share
Try the following:
$('.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.
});
});
});
This should only allow one datetimepicker to be open at a time.
source to share