1

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

我在我的网站上使用 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>

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

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

4

1 回答 1

0

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

onOpen: function(selectedDates, dateStr, instance) {
    $(instance.prevMonthNav).append("<img src='/ui/images/icons/arrow-left.svg'>");
}
于 2018-05-25T02:25:28.733 回答