需要 flatpickr 输入答案

【问题标题】：Make flatpickr input required需要 flatpickr 输入
【发布时间】：2017-12-24 16:12:09
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

将 attr 名称从先前隐藏的输入类型复制到呈现的 flatpickr 输入就这样做

$('[name=date_open]').next('input').attr("name","date_open");
$('[name=date_close]').next('input').attr("name","date_close");

【讨论】：

【解决方案2】：

这是我想出的尽可能完整的解决方案。它防止表单提交（当没有选择日期并且需要输入时），确保浏览器原生“必填字段”消息弹出并防止用户直接输入值。

flatpickrConfig = {
    allowInput: true, // prevent "readonly" prop
    onReady: function(selectedDates, dateStr, instance) {
        let el = instance.element;
        function preventInput(event) {
            event.preventDefault();
            return false;
        };
        el.onkeypress = el.onkeydown = el.onkeyup = preventInput; // disable key events
        el.onpaste = preventInput; // disable pasting using mouse context menu

        el.style.caretColor = 'transparent'; // hide blinking cursor
        el.style.cursor = 'pointer'; // override cursor hover type text
        el.style.color = '#585858'; // prevent text color change on focus
        el.style.backgroundColor = '#f7f7f7'; // prevent bg color change on focus
    },
};

这样做有一个缺点：当 flatpickr 打开时（当输入有焦点时），键盘快捷键被禁用。这包括 F5、Ctrl + r、Ctrl + v 等，但由于某种原因在 Linux 上的 Chromium 88 中不包括 Ctrl + w。我使用相当旧的 flatpickr 版本 3.1.5 开发了它，但我认为它也应该适用于更新的版本。

如果您想使用altFormat（向用户显示一种日期格式，向服务器发送另一种日期格式），这也意味着设置altInput: true，您还必须更改onReady函数以使用@987654326 @ 而不是 instance.element。

onReady 事件侦听器可能会在初始化后附加到实例。但是，我打算将 flatpickr 与 vue-flatpickr-component 一起使用，在这种情况下您无法优雅地访问各个 flatpickr 实例，因此我使用了配置字段。

我没有在移动设备上测试过。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

这几天一直在努力，终于得到了我想要的结果。

注意：我正在使用带有 jQuery 验证的 flatpickr

正如您所知，flatpickr 使用替代字段作为日期输入，存储日期的实际字段是隐藏的，这是关键。

jQuery 验证有一组默认值，默认情况下隐藏字段不受验证，这通常很有意义。所以我们只需要打开隐藏字段的验证来完成这项工作。

    $.validator.setDefaults({
        ignore: []
    });

所以我的验证器规则是相当正常的：

    var valid = {
                rules: { dateyearlevel: {required: true} },
                messages: { dateyearlevel: {required: "The date is required"} }
    };
    $("#myform").validate(valid);

这应该可以让您确保日期是必需的。在我的情况下，我希望我的日期只需要选中一个复选框。为此，我们更改了上述规则：

    var valid = {
                rules: { dateyearlevel: {
                  required: function() { return $("#mycheckbox").is(":checked") } 
                } },
                messages: { dateyearlevel: {required: "The date is required"} }
    };
    $("#myform").validate(valid);

【讨论】：

【解决方案5】：

如果这对某人有帮助，我将使用 parsley.js 进行前端验证，它与 flatpickr 配合使用效果很好

enter image description here

【讨论】：

【解决方案6】：

只是为了对此进行更多扩展，我发现将忽略值设置为空数组也对我有用。您可以将其添加到您的验证回调中。显示也有点问题，所以我更新了 errorPlacement 以允许这样的 flatpickr 输入。

$('#my-form').validate({
    errorPlacement: function (error, element) {
        if (element.hasClass('js-flatpickr') && element.next('.js-flatpickr').length) {
            error.insertAfter(element.next('.js-flatpickr'));
        } else if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
           error.insertAfter(element);
        }
    },
    ignore: [],
    rules: {
        'startdate': { required: true }
    },
    messages: {
        'startdate': {required: "Start Date is required"}
    },
    submitHandler: function(form) {
        // ajax form post
    }
});

【讨论】：

【解决方案7】：

您可以通过以下方式轻松实现：

在 flatpickr 配置中传递 allowInput:true。

例如：

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

来自documentation：

允许用户直接在输入字段中输入日期。经过默认禁用直接输入。

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

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

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 处于焦点时添加回属性以防止手动输入。更多详情here。

【讨论】：