flatpickr + 外部元素不工作

Question

我是 flatpickr 的新手。

有人可以在 jsfiddle 中展示 "flatpickr + external elements" 是如何工作的吗？

我在页面上有 4/5 个文本输入。我正在使用

将这些文本输入转换为 flatpicker

/* 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 没有渲染。

错误：无效的输入元素指定为 null

你能告诉我我做错了什么吗？

提前致谢。

Answer 1

Flatpickr 文档根本没有解释这一点，但是您要做的是 "wrap" 另一个元素中的元素并将 that 元素传递给 flatpickr （）功能。这就是 "wrap: true" 中的 "wrap" 所指的。

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

flatpickr + 外部元素不工作

flatpickr + external elements not working

flatpickr