Can't prevent bootstrap dropdown from hiding with datepicker in Meteor 0.8

Question

I'm aiming to have bootstrap datepicker https://atmospherejs.com/package/bootstrap3-datepicker be inline in a bootstrap dropdown. I found this to be the slickest ux for what I'm looking to do.

I got it working just fine before upgrading to 0.8, but now whenever a date is selected the dropdown hides. I don't want it to hide, because I've got a button in the dropdown to save the date selection. Besides that, now I can't get anything to write to the console on click. I've tried setting up click events on every aspect of the date picker I can think of. The 'click' test below fires if you click on the month arrows or somewhere around the dates, but not on the dates themselves.

Any help would be very appreciated. I'm developing an unhealthy obsession.

Here is what I had that was working.

HTML

              <div class="btn-group form-control-static field no-print">
                <div class="dropdown-toggle" data-toggle="dropdown" style="" title="Schedule New Call">
                    <a><i class="fa fa-calendar"></i> Schedule New Call</a>
                </div>
                <ul class="dropdown-menu">
                    <li class="picker-wrapper">
                        <div class="schedule-calls-day-picker"></div>
                        <input id="schedule-calls-day-holder" type="hidden" value="{{date}}">
                        <div class="schedule-calls-time-picker">
                            <div class="col-lg-3">
                                <i class="fa fa-clock-o fa-2x"></i>
                            </div>
                            <div class="col-lg-9">
                                <input type="text" class="form-control" id="schedule-calls-time-input" value='{{time}}'>    
                            </div>
                        </div>
                        <div class="btn-group col-lg-12" style="margin-top:5px;">
                            <div class="btn btn-primary col-lg-12 set-schedule-calls">Schedule Call</div>
                        </div>
                    </li>
                </ul>
            </div>

Template Events

  'click .picker-wrapper' : function (e) {
        console.log('clicked');
        e.stopPropagation();    
    }

Template.rendered

$('.schedule-calls-day-picker').datepicker()
    .on('changeDate', function(e){
        var tryDate = moment(e.date).format("YYYY-MM-DD")
        $('#schedule-calls-day-holder').val(tryDate);
    });

Answer 1

Here is my workaround for the time being. It works, but it's not perfect.

I ended up tapping into the dropdown hide event and preventing default like this:

$('.schedule-dropdown').on('hide.bs.dropdown', function (e) {
    e.preventDefault();     
})

The successfully stopped the dropdown from disappearing, but now the problem was it never went away. So I just took the easy way out and added a cancel button, and linked that and the submit button to close it manually like so:

$('.schedule-dropdown').removeClass('open');

So that's the best I've got for now. It would be nice to be able to close it if the user clicks anywhere else on the screen, but its' not critical for now.

EDIT

Here is a further work-around to have it close if the user clicks anywhere else:

$('.schedule-dropdown').on('hide.bs.dropdown', function (e,t) {     
    e.preventDefault();         
}).on('show.bs.dropdown', function (e,t) {
    var ct = e.currentTarget;
    $('body').click(function(e) {
        var clicked = e.target;
        if($(clicked).hasClass('day')||$(clicked).hasClass('month')||$(clicked).hasClass('year')){
            //do nothing, they selected a date element
        } else {
            console.log('remove day');
            $(ct).removeClass("open");
            $('body').off('click');
        }

    })
})

Answer 2

I don't have a complete answer for you but since it's been 2 days I thought some help might be better than none.

I found that the datepicker responded to the change event:

 'change #my-datepicker': function(e){
    e.stopPropagation();
    console.log('clicked');
}

I did have the same problem with the parent dropdown disappearing, and I couldn't get that fixed. Maybe consider using http://silviomoreto.github.io/bootstrap-select/

It's got a richer API than the standard dropdown, including show() and hide() methods.

Hope that helps.