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

【问题标题】：Calendar in flatPickr disapears after coming back to pageflatPickr 中的日历在返回页面后消失
【发布时间】：2020-08-19 13:37:13
【问题描述】：

我正在开发 Rails 5 项目并使用 flatPickr gem 制作日历。日历工作正常，让我可以毫无问题地在日期上进行搜索。我以为一切都很好。但是，我注意到当我离开我的主页时，我使用 flatPickr 并返回它时，日历不再出现。我检查了页面，甚至可以看到 flatPickr CSS 类不再出现在表单上。就像应用程序刚刚忘记了 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 有关。就像我说的，当我最初登陆/刷新主页时工作正常。一旦我离开主页并返回它就不起作用。感谢您的帮助。

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

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

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

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

【问题讨论】：

标签： javascript jquery rubygems ruby-on-rails-5 flatpickr

【解决方案1】：

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

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

添加了 turbolinks:load 有帮助。

【讨论】：