使用 flatpickr 时如何附加 html 元素答案

【问题标题】：How to append an html element when using flatpickr使用 flatpickr 时如何附加 html 元素
【发布时间】：2018-05-25 00:30:17
【问题描述】：

我遇到了最奇怪的问题，我很困惑。

我在我的网站上使用 flatpickr 作为日期选择器，这个工具工作得非常好，但是我想我想在弹出对话框中添加一个额外的图像。我在想“我能做到！”所以我走了。

我找到了 onOpen() 钩子，并且知道它是我需要做的完美功能。然后我写了一些 jQuery 来引用对话框上的正确区域，然后 .append(htmlString)

我用于生成弹出窗口的代码和我的配置选项是：

    $dateRangeInputs.flatpickr({
    altInput: true,
    mode: 'range',
    onOpen: function(selectedDates, dateStr, instance) {
        instance.prevMonthNav.append("<img src='/ui/images/icons/arrow-left.svg'>");
    }
});

问题是 'htmlString' 完全被视为文本，忽略了 html 指令，所以我在对话框中显示了以下 HTML。

<svg version="1.1" ...> ... </svg>
&lt;img src='/ui/images/icons/arrow-left.svg'&gt;</span>

我还附上了一张图片，供那些喜欢视觉解释的人使用。

我已经检查并重新检查了 jQuery append() 命令，它应该正确处理 htmlString 参数。我唯一的想法是 flatpickr 库中有一些东西只允许包含文本。我认为我最好的帮助将来自使用 flatpickr 的其他人。

【问题讨论】：

标签： flatpickr

【解决方案1】：

解决了！我需要将实例属性包装为 jQuery 选择器，如下所示：

onOpen: function(selectedDates, dateStr, instance) {
    $(instance.prevMonthNav).append("<img src='/ui/images/icons/arrow-left.svg'>");
}

【讨论】：