flatpickr being replaced by rails date-select in mobile or tablet mode

Question

Rails 6.0.3 application with webpacker and flatpickr installed has a form element

<%= 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]">

It is running properly in desktop mode

HTML code

<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">

However, upon running the debugger in mobile and tablet mode - both with Opera/chromium and Firefox, the field is reverted to a date select text-input type form which does not even respect the date format settings

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

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

The HTML inpsection reveals

<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">

In both cases, the console complains about

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

Given the desktop version works as expected, it is not an issue related to the order of jquery loading - the code base is identical.

Somehow, the device detection is throwing all of the information out and resorting to some default mode (as can be deduced by the date format). It is hard to pin down what is going on as many possible actors are at play. The bootstrap reference is another clue, as the aplication is meant to depend on Foundation

Any ideas how to iron this out?

Answer 1

Make sure your 'flatpickr_settings.js' file imports the confirmDatePlugin module in your JavaScript source:

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