需要 flatpickr 输入

Question

我在一个项目上使用了惊人的flatpickr，并且需要强制指定日历日期。

我试图在本机 HTML 中进行所有验证，所以我天真地尝试将required属性添加到输入标记，但这似乎不起作用。

有没有办法用 flatpickr 本地强制日期，还是我需要编写一些自定义检查？

Answer 1

您可以通过以下方式轻松实现这一目标：

传入allowInput:trueflatpickr 配置。

例如：

flatpickrConfig = {
    allowInput: true, // prevent "readonly" prop
};

从文档中：

允许用户直接在输入字段中输入日期。默认情况下，直接输入被禁用。

此解决方案的缺点是您应该启用直接输入（但理想情况下，无论是否启用直接输入，都应该进行表单验证）。

但如果你不想启用直接输入来解决这个问题，你可以使用下面的代码作为解决方法：

flatpickrConfig = {
    allowInput:true,
    onOpen: function(selectedDates, dateStr, instance) {
        $(instance.altInput).prop('readonly', true);
    },
    onClose: function(selectedDates, dateStr, instance) {
        $(instance.altInput).prop('readonly', false);
        $(instance.altInput).blur();
    }
};

此代码readonly在未获得焦点时删除该属性，以便可以进行 html 验证，并readonly在获得焦点时重新添加该属性以防止手动输入。有关它的更多详细信息请参见此处。

Answer 2

在深入研究 GitHub 存储库后，我发现了一个已关闭的问题，指出该问题不会得到解决。

在同一问题页面中，有一个解决方法似乎可以解决问题：

$('.flatpickr-input:visible').on('focus', function () {
    $(this).blur()
})
$('.flatpickr-input:visible').prop('readonly', false)