flatpickr + внешние элементы не работают

Question

Я новичок в flatpickr.

Может кто-нибудь показать в jsfiddle, как работает "flatpickr + external elements"?

У меня есть 4/5 текстовых вводов на странице. Я конвертирую эти текстовые вводы в плоскую форму, используя

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

        });
}); 

На моей HTML-странице у меня есть как HTML, /* HTML-страница */

<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>

....

Если я не добавляю wrap: true, все работает нормально.

Если я добавлю add wrap: true, то получу ошибки JS, а flatpickr не рендерится.

Ошибка: неверный элемент ввода указан ноль

Не могли бы вы сказать мне, что я делаю не так?

Заранее спасибо.

Answer 1

В документации Flatpickr это вообще не объясняется, но вам нужно "обернуть" элементы в другой элемент и передать этот элемент в функцию flatpickr(). Это то, к чему относится "wrap" в "wrap: true".

<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>