无法在 rails 表单中创建所需的 flatpickr 字段

Question

我有一个 form_for 表格。我的一些字段用于选择日期，我正在使用 flatpickr。我在客户端使用表单验证将字段设为必填时遇到问题。

我在 application.js 中有以下基本的 flatpickr 代码：

flatpickr("[data-behavior='flatpickr']", {
  altInput: true,
  altFormat: "F j, Y",
  dateFormat: "Y-m-d"
});

在我看来，我试过制作这样的字段（有很多变化）：

<%= f.text_field :attribute_name,
  { label: "Description of attribute", data: { behavior: "flatpickr" }, required: true } %>

产生这个 HTML:

<label class="required" for="model_name_attribute_name">Description of attribute</label>
<input data-behavior="flatpickr" required="required" class="form-control flatpickr-input" type="hidden" name="model_name[attribute_name]" id="model_name_attribute_name">
<input class="form-control form-control input" placeholder="" required="" tabindex="0" type="text" readonly="readonly">

一切正常，除了我不知道如何使该字段成为必填字段。 Flatpickr 创建一个隐藏字段，其中包含在 javascript 弹出窗口中选择的实际日期值，然后在可见字段中使用您喜欢的任何格式显示它 readonly 因为它是由 flatpickr 设置的。似乎我试图使该字段成为“必填”字段，使标签具有“必填”class 并使隐藏字段成为“必填”，同时将我的可见字段保留为 required=''，这还不够在未选择任何内容且字段为空时停止提交。我有一个服务器端验证捕获它，但我想找到一种方法让客户端验证也能工作。

Answer 1

显然这是 flatpickr 中的一个已知错误，尚未修复，至少在撰写本文时是这样，但看起来它已经存在好几年了。作为一种解决方法，我最终通过在我的 flatpickr 配置中添加 allowInput: true 成功解决了这个问题，如下例所示：

flatpickr("[data-behavior='flatpickr']", {
  allowInput: true,
  altInput: true,
  altFormat: "F j, Y",
  dateFormat: "Y-m-d"
});

然后我想在用户关注（通过单击或选项卡按钮）flatpickr 字段和 inspired by this 时自动 select 字段中的所有文本，我决定使用 jQuery:

$("[data-behavior='flatpickr']").next().focus(function() {
  $(this).on("click.a keyup.a", function(e){      
    $(this).off("click.a keyup.a").select();
  });
});

与原始代码的关键区别在于 .next()。正如我之前提到的，flatpickr 创建了一个隐藏字段来存储使用 pop-up 选择器 selected 的日期，从技术上讲，它是具有 id 和 data-behavior 属性的隐藏字段.所以对于 next()，我们正在监听可见字段，它是下一个元素。

在 flatpickr GitHub issue page 上讨论了许多替代方法，供那些想要不同方法的人使用，具体取决于您的需要。

无法在 rails 表单中创建所需的 flatpickr 字段

Unable to make flatpickr field required in rails form

javascript

html

ruby-on-rails

forms

flatpickr