datetime - 使 flatpickr 输入成为必需

Question

我正在使用令人惊叹的flatpickr在项目中，需要强制日历日期。

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

是否有一种方法可以使 flatpickr 本身强制指定日期，或者我是否需要编写一些自定义检查？

Answer 1

您可以通过以下方式轻松实现此目的:

Passing allowInput:true in flatpickr config.

例如:

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

来自documentation :

Allows the user to enter a date directly into the input field. By default, direct entry is disabled.

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

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

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 .