Flatpickr calendar will not stay open

Question

I have been able to use flatpickr fine initialized with a single input field. I would like to add an icon to the side of the input on which the user would click to bring up the calendar. I am using bootstrap which can be challenging when it comes to input-groups. I have been unable to get the [example][1] working at all - all I get when I use the code is an input that does not do anything with no calendar icon displayed when I initialize with the {wrap:true} option. If anyone has any hints or a full example of how to get this to work, it would be the ideal solution.

Since I has no luck with the method suggested in the documentation, I next tried to build the structure needed by adding the required elements using jquery - I am almost there - I have an icon that does open the calendar next to the input field, but the calendar closes again immediately - sometimes so fast it looks like it never opens. Here is my code:

HTML

<input type="text" name="planned_date" class="dateinput datetimepicker form-control flatpickr-input active" tabindex="5" autocomplete="off" data-check-month="1" data-min-date="0" data-max-date="45" data-input="" id="id_planned_date">

js: applies flatpickr to each date field on the page

$.each($('.dateinput, .datetimeinput'), function () {
    if ($(this).hasClass("datetimepicker")) {
        if ($(this).hasClass("dateinput")) {
            picker_format = 'm/d/Y';
        }
        else {
            picker_format = 'm/d/Y, H:i';
        }
        var minDate = new Date().fp_incr(-parseInt($(this).attr("data-min-date")))
        var maxDate = new Date().fp_incr(parseInt($(this).attr("data-max-date")))
        $(this).wrap("<div class='flatpickr input-group'></div>");
        $('<a class="input-button" title="toggle" data-toggle><i class="fa fa-calendar"></i></a>').insertAfter(this);
        var calendar=$(this).flatpickr({
            allowInput: true,
            dateFormat: picker_format,
            minDate: minDate,
            maxDate: maxDate,
            //wrap: true,
        });
        $(this).next("a").click(function () {
            debugger;
            calendar.toggle();  //.open() does the same thing
        });
    }
});

This displays a little icon next to the field which I can click on to open the calendar. Why does the calendar disappear so quickly? What am I doing wrong? Is there something I can add to keep the calendar open? Any hints would be appreciated. [1]: https://flatpickr.js.org/examples/#flatpickr-external-elements