4

我是 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一切正常。

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

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

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

提前致谢。

4

1 回答 1

4

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>
于 2019-09-17T03:06:31.517 回答