Bootstrap 模式中的 Flatpickr 无法输入年份

Question

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

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

感谢您的帮助。

Flatpickr version 4.6.9

和

Bootstrap version 5.1.1

Answer 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/[email protected]/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/[email protected]/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>

Answer 2

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

我发现这个问题是由于引导程序对焦点有点过于激进而引起的，这意味着只需在模态中添加

bs-focus="false"

 即可解决该问题。

示例：

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

Answer 3

如何向 Laravel Livewire 组件中的 Flatpickr 日期选择器添加年份下拉菜单？

我在下面添加了这个，但在这个我没有得到年份下拉菜单...... flatpickr('.date_picker', { 日期格式：'年-月-日', 默认日期: '{{ $dob }}', });

我没有收到年份下拉列表 在这我如何添加年份下拉菜单？