返回页面后 flatPickr 中的日历消失

Question

我正在做一个 Rails 5 项目并使用 flatPickr gem 制作日历。日历工作正常，让我可以毫无问题地搜索日期。我以为一切都很好。但是，我注意到当我离开我的主页时，我使用 flatPickr 并返回它，日历不再出现。我检查了页面，甚至可以看到 flatPickr CSS class 不再出现在表单上。这就像应用程序忘记了 flatPicker。这是我的代码：

application.js:

//= require jquery
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require bootstrap
//= require_tree .
//= require flatpickr


document.addEventListener('DOMContentLoaded', function() {
  flatpickr('#datePicker', {
    enableTime: false,
    dateFormat: "Y-m-d",});
})

document.addEventListener('DOMContentLoaded', function() {
  flatpickr('#datePicker2');
})

home.html.erb:

  <%= form_with(url: "/report", method: "get", remote: true) do |f| %>

      <%= f.label(:first_date, "First Date:") %>
      <%= f.text_field(:first_date, id: 'datePicker')  %>

      <%= f.label(:last_date, "Last Date:") %>
      <%= f.text_field(:last_date, id: 'datePicker2')  %>

      
      <br>
      <p>Enter Report Type:</p>
      <%= select_tag :reportType,
        options_for_select([['po', 'po'], ['invoice', 'invoice'], ['sale', 'sale'], ['received', 'received']]) %>
      <br>

      <%= submit_tag("Show Report") %>

  <% end %>

我不确定，但想知道我的问题是否与使用 DOMContentLoaded 有关。就像我说的，当我最初 land/refresh 主页时工作正常。一旦我离开主页再回来，它就不起作用了。感谢您的帮助。

更新：我尝试在 rails 中使用 datePicker gem 并遇到完全相同的问题。我还修改了我的 jquery 调用如下：

$(document).ready(function(){
  $("#datePicker").focus(function(){
    flatpickr('#datePicker');
  });
});

window.addEventListener("pageshow", function() {
  flatpickr('#datePicker2');
})

仍然遇到同样的问题 - 当我离开页面时，日历停止显示。

Answer 1

我能够回答我的问题，解决方案是这样的：

window.addEventListener("turbolinks:load", function() {
  flatpickr('#datePicker2');
})

添加 turbolinks:load 很有帮助。

返回页面后 flatPickr 中的日历消失

Calendar in flatPickr disapears after coming back to page

javascript

jquery

rubygems

ruby-on-rails-5

flatpickr