如何解决无法使栏杆形式所需的Flatpickr字段
我有一个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设置。似乎我尝试使字段为“必需”使标签具有“必需”类，并使隐藏字段为“必需”，同时使我的可见字段保留required=''，不足以停止提交时没有选择任何内容，并且该字段为空。我有一个服务器端验证来捕获它，但我想找到一种使客户端验证也能工作的方法。
解决方法
显然，这是flatpickr中的一个已知错误，至少在撰写本文时尚未修复，但似乎已经存在了好几年。解决方法是，通过在我的flatpickr配置中添加<img src="page.php" />
来成功解决此问题，如下例所示：
//img[@src='/page.php']然后，当用户将注意力集中在flatpickr字段和inspired by this上时，我想自动选择该字段中的所有文本，然后我决定使用jQuery：
allowInput: true与原始代码相同的关键区别是flatpickr("[data-behavior='flatpickr']",{
allowInput: true,altInput: true,altFormat: "F j,Y",dateFormat: "Y-m-d"
});
。如前所述，flatpickr创建了一个隐藏字段来存储使用弹出式选择器选择的日期，从技术上讲，该隐藏字段具有$("[data-behavior='flatpickr']").next().focus(function() {
$(this).on("click.a keyup.a",function(e){
$(this).off("click.a keyup.a").select();
});
});
和.next()属性。因此，使用id，我们正在侦听可见字段，这是下一个元素。
在flatpickr GitHub issue page上讨论了许多替代方法，供那些需要其他方法的人使用，具体取决于您的需求。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
