flatpickr +外部元素不起作用答案

【问题标题】：flatpickr + external elements not workingflatpickr +外部元素不起作用
【发布时间】：2019-04-27 19:20:49
【问题描述】：

我是 flatpickr 的新手。

有人可以在 jsfiddle 中展示“flatpickr + 外部元素”的工作原理吗？

我在页面上有 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 一切正常。

如果我添加 wrap: true 那么我得到 JS 错误并且 flatpickr 没有呈现。

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

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

提前致谢。

【问题讨论】：

标签： flatpickr

【解决方案1】：

Flatpickr 文档根本没有解释这一点，但您要做的是将元素“包装”在另一个元素中并将那个元素传递给 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>

【讨论】：