CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3eonasdan-datetimepicker
Zion
Zion

Reputation: 1610

Bootstrap datetimepicker close when another datetimepicker is opened

I'm currently using http://eonasdan.github.io/bootstrap-datetimepicker/

How do we close an opened datetimepicker if I open another datetimepicker?

Because I have 2 datetimepickers and they over lap.

code:

$('#picker_start_date').click(function() {
    var start_picker = $("#picker_start_date").find(".bootstrap-datetimepicker-widget");
    var end_picker = $("#picker_end_date").find(".bootstrap-datetimepicker-widget")
    if(end_picker.is(":visible")) {
        end_picker.hide();
        start_picker.show();
    }
    else {
        start_picker.show();
    }
})

$('#picker_end_date').click(function() {
    var start_picker = $("#picker_start_date").find(".bootstrap-datetimepicker-widget");
    var end_picker = $("#picker_end_date").find(".bootstrap-datetimepicker-widget");
    if(start_picker.is(":visible")) {
        start_picker.hide();
        end_picker.show();
    }
    else {
        end_picker.show();
    }
})

I've tried this code above and it's hit and miss. It's not consistent

Upvotes: 1

Views: 1156

Answers (1)

HalfWebDev
HalfWebDev

Reputation: 7638

You didn't pasted your markup. Anyway hope this snippet helps you to achieve the desired functionality.

Say, we have two datepickers with ids datepicker1 and datepicker2 

jQuery(document).ready(function(){
  $('#datepicker1').hide();
   $('#datepicker2').hide(); 
/* Please note that if the css rules are set to display:none !important then it may not hide them */

 $('#datepicker1').click(function(){

  $(this).toggle();
 });

 $('#datepicker2').click(function(){

  $(this).toggle();
 });
});

P.S -Please ensure you use seperate ids for diff. datepickers. Have your jquery loaded before it.

Do let me know if you face any trouble !

Upvotes: 1

Related Questions