如何在使用flatpickr时附加html元素

Question

我遇到了最棘手的问题而且我很难过。

我在我的网站上使用flatpickr作为日期选择器，这个工具效果很好，但是我想我想在弹出对话框中添加一个额外的图像。我在思考＆＃39;我能做到这一点！＆＃39;我走了。

我找到了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'>");
    }
});

问题在于＆＃39; htmlString＆＃39;被完全视为文本，忽略了html指令，所以我在对话框中出现了以下HTML。

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

对于那些喜欢视觉解释的人，我还附上了一张照片。

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

Answer 1

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

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