[API] .open() not working inside function()

[jonathanarbely]

When I call $('#departureDate').data('dateRangePicker').open(); inside a function, it is being opened and then closed immediatley. When I call the same API in the code's root (inside $( document ).ready(function() {)) it works just fine. How does that come about?

Update: When I do it like this, it works somehow (note the 1ms delay):

setTimeout(function(){ $('#departureDate').data('dateRangePicker').open(); }, 1);

[holtkamp]

When I call $('#departureDate').data('dateRangePicker').open(); inside a function, it is being opened and then closed immediately.

Also encountered this when using it on the onclick attribute of a <button/> element:

<button onclick="$('#departureDate').data('dateRangePicker').open(); return false;">Open DateRangePicker</button>

The suggested workaround works as well:

<button onclick="setTimeout(function(){ $('#departureDate').data('dateRangePicker').open(); }, 1); return false;">Open DateRangePicker</button>

However, using an event listener on the button also seems to work:

<button id="buttonToOpenDateRangePicker">Open RangePicker</button>

$('#buttonToOpenDateRangePicker').click(function(event) {
    event.stopPropagation();
    $('#departureDate').data('dateRangePicker').open();
});

Also see https://longbill.github.io/jquery-date-range-picker/#demo27

[fatihkizmaz]

I can confirm this issue still persists. This sample from @holtkamp does not work also if you remove line "event.stopPropagation();" But it work if you do not remove that line.

$('#buttonToOpenDateRangePicker').click(function(event) {
    event.stopPropagation();
    $('#departureDate').data('dateRangePicker').open();
});