Flatpickr: Unable to use custom elements to open the calendar

[rafaelrenanpacheco]

Hi there!

After updating to the brand new awsome 1.7 version, I tried the new "custom elements to open" feature. I think this feature was coded the more generic as possible, to work in many situations, as the doc says: "common in Bootstrap and other frameworks"

So I tried in Bootstrap, and after many trials, it just don't want to work. Here is the code I'm trying:

<div class="input-group flatpickr" data-wrap="true" data-clickOpens="false">
    <span class="input-group-addon" data-open>
        <i class="fa fa-calendar"></i>
    </span>
    <input class="form-control" data-input type="text">
</div>

And I boot up flatpickr using directly the dom element, like:

flatpickr(element);

If I click the input element, it triggers the calendar, and block user input from keyboard. A behaviour very different from the sample page.

Am I missing something to get this to work?

Best regards,
Rafael Pacheco.

[chmln]

You have to initialize flatpickr on the following element:

<div class="input-group flatpickr" data-wrap="true" data-clickOpens="false">

Are you calling flatpickr(".flatpickr") ?

[rafaelrenanpacheco]

Wow, nice catch =)

I didn't notice that was the group that should be initialized.

Working fine as expected :smile:

Thank you very much.