Prevent bootstrap function from toggling dropdown

Question

I converted a bootstrap navbar into a toolbar and modified a dropdown (dropup actually) to contain 2 datepicker elements:

The problem is that when I select a date, the dropdown collapses. My solution (I'm open to others) is to create a function that opens the dropdown by adding class 'open' and adding that function into the datepicker close() function.

function leaveOpen(){
  $("#dropdownMenu2").trigger('focus').attr('aria-expanded', 'true');
  $("#rangeDropdown").addClass('open');
}(jQuery);

This function works properly, but there is another bootstrap function that toggles the 'open' class right back off:

Dropdown.prototype.toggle = function (e) {
var $this = $(this)
if ($this.is('.disabled, :disabled')) return
var $parent  = getParent($this)
var isActive = $parent.hasClass('open')
clearMenus()

if (!isActive) {
  ...
  var relatedTarget = { relatedTarget: this }
  $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
  ...
  $this
    .trigger('focus')
    .attr('aria-expanded', 'true')

  $parent
    .toggleClass('open')
    .trigger('shown.bs.dropdown', relatedTarget)
}

I'm a bit overwhelmed by this JavaScript. What can I add to leaveOpen() to prevent the 'open' class from toggling within 'Dropdown.prototype.toggle = function (e)'?

Answer 1

Check it out: https://jsfiddle.net/hoffmanc/y6sho3nv/9/

There are two prevention mechanisms required AFAIK:

1) Stop the dropdown from being hidden upon clicking the datepicker text field:

$('.datepicker').on('click', function (e) {
    e.stopPropagation();
});

ref: https://stackoverflow.com/a/8178945/338303

2) Stop the dropdown from being hidden upon clicking a date in the calendar itself:

$('.dropdown').on('hide.bs.dropdown', function (e) {
    if($('.datepicker-dropdown').length > 0) {
        return false;
    }
});

ref: https://stackoverflow.com/a/19797577/338303