Bootstrap 模态中的 Flatpickr 无法输入年份输入答案

【问题标题】：Flatpickr inside of Bootstrap modal can not type in year inputBootstrap 模态中的 Flatpickr 无法输入年份输入
【发布时间】：2023-01-31 23:21:46
【问题描述】：

我在 Bootstrap 模态中使用 Flatpickr 渲染时遇到问题。

当我在模态中打开 Flatpickr 条目时，除了输入年份之外，一切似乎都正常。当我想点击年份时，输入字段不起作用。

感谢帮助。

Flatpickr version 4.6.9和Bootstrap version 5.1.1

【问题讨论】：

标签： bootstrap-modal flatpickr

【解决方案1】：

为了使用月份和年份选择器，您需要使用 Flatpickr 选项static: true。这样它就不会隐藏在模态后面。

$(document).ready(function() {
  const flatpickr_time = $('#flatpickr_time').flatpickr({
    //static: position the calendar inside the wrapper and next to the input element*.
    static: true
  });
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script>

<div class="container">
  <div class="row justify-content-center">
    <div class="col-4 m-5">
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch modal</button>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <input id="flatpickr_time" style="width:200px;">
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

我遇到了同样的问题，虽然 Crezzur 提出的解决方案确实有效，但它有一些我不想要的副作用。

我发现这个问题是由于 bootstrap 对焦点有点过于激进，这意味着它可以通过在你的模式中添加 bs-focus="false" 来简单地解决。

例子：

<div class="modal" role="dialog" data-bs-focus="false">

【讨论】：