7

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

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

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

4

7 回答 7

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要使用的功能instance.altInput而不是instance.element.

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

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

于 2021-09-02T08:05:16.367 回答
2

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

$('[name=date_open]').next('input').attr("name","date_open");
$('[name=date_close]').next('input').attr("name","date_close");
于 2018-10-27T17:17:40.923 回答
1

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

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

$('.flatpickr-input:visible').on('focus', function () {
    $(this).blur()
})
$('.flatpickr-input:visible').prop('readonly', false)
于 2017-07-19T16:05:09.103 回答
1

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

注意：我正在使用带有 jQ​​uery 验证的 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);
于 2019-05-23T00:54:32.717 回答
0

只是为了对此进行更多扩展，我发现将忽略值设置为空数组也对我有用。您可以将其添加到您的验证回调中。显示也有点问题，所以我更新了 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
    }
});
于 2021-03-26T13:21:35.407 回答
0

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

传入flatpickrallowInput:true配置。

例如：

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在其处于焦点时添加回道具以防止手动输入。更多细节在这里。

于 2021-10-20T12:40:23.967 回答
0

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

在此处输入图像描述

于 2020-02-26T15:22:06.213 回答