flatpickr 在移动或平板电脑模式下被 rails date-select 取代

Question

安装了 webpacker 和 flatpickr 的 Rails 6.0.3 应用程序有一个表单元素

<%= f.label :date_of_birth %>
<input class=flatpickr type="text" placeholder="<%= t('user.select_dob') %>" 
  id="user_date_of_birth" name="user[date_of_birth]">

在桌面模式下运行正常

HTML 代码

<label for="user_date_of_birth">Date of birth</label>
  <input class="flatpickr flatpickr-input" type="text" placeholder="Select your date of 
  birth" id="user_date_of_birth" name="user[date_of_birth]" readonly="readonly">

但是，在移动设备和平板电脑模式下运行调试器时 - 使用 Opera/chromium 和 Firefox，该字段将恢复为日期选择文本输入类型表单，甚至不考虑日期格式设置

var configs = {
datetime: {
    enableTime: true,
    dateFormat: "Y-m-d H:i",
},

altinput: {
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d"
},

HTML inpsection 显示

<label for="user_date_of_birth">Date of birth</label>
<input class="flatpickr flatpickr-input" type="hidden" placeholder="Select your date of 
  birth" id="user_date_of_birth" name="user[date_of_birth]" readonly="readonly">
<input class="flatpickr flatpickr-input flatpickr-mobile" tabindex="1" type="date" 
  placeholder="Select your date of birth">

在这两种情况下，控制台都会抱怨

Uncaught ReferenceError: confirmDatePlugin is not defined
    at Object../app/javascript/packs/flatpickr_settings.js (flatpickr_settings.js:210)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

鉴于桌面版本按预期工作，这不是与 jquery 加载顺序有关的问题 - 代码库是相同的。

不知何故，设备检测会抛出所有信息并采用某种默认模式（可以通过日期格式推断）。很难确定发生了什么，因为有许多可能的演员在起作用。 bootstrap 引用是另一个线索，因为应用程序依赖于 Foundation

有什么办法可以解决这个问题吗？

Answer 1

确保您的 'flatpickr_settings.js' 文件在您的 JavaScript 源代码中导入 confirmDatePlugin 模块：

import confirmDatePlugin from 'flatpickr/plugins/confirmDate/confirmDate'