flatpickr + external elements not working

Question

I am new to flatpickr.

Can someone show in a jsfiddle how the "flatpickr + external elements" works?

I have 4/5 text inputs on the page. I am converting those text inputs to flatpicker using

/* flatpickr initialisation */
$(document).ready(function () {
     $('.datetime').flatpickr({
            noCalendar: false,
            enableTime: true,
            allowInput: true,
            dateFormat: 'M d, Y h:i K',
            minuteIncrement: 1,

        });
}); 

In my html page, I have html like, /* Html page */

<input name="endtDate" type="text" class="datetime" placeholder="Select Date.." data-input> 
<a class="input-button" title="toggle" data-toggle>
    <i class="icon-calendar"></i>
</a>
<a class="input-button" title="clear" data-clear>
    <i class="icon-close"></i>
</a>

....

If I do not add wrap: true everything works fine.

If I add add wrap: true then I got JS errors and flatpickr is not rendering.

Error: invalid input element specified null

Could you please tell me what am I doing wrong?

Thanks in advance.

Answer 1

The Flatpickr docs don't explain this at all, but what you have to do is "wrap" the elements in another element and pass that element to the flatpickr() function. That's what the "wrap" in "wrap: true" is referring to.

<div class="datetime">
    <input name="endtDate" type="text" placeholder="Select Date.." data-input> 
    <a class="input-button" title="toggle" data-toggle>
        <i class="icon-calendar"></i>
    </a>
    <a class="input-button" title="clear" data-clear>
        <i class="icon-close"></i>
    </a>
</div>