Flatpickr inside of Bootstrap modal can not type in year input

Question

I have a problem with Flatpickr rendering in a Bootstrap modal.

When I open a Flatpickr entry within a modal, everything seems to work fine except for entering a year. When I want to click on the year, the input field does not work.

Thanks for help.

Flatpickr version 4.6.9 and Bootstrap version 5.1.1

Answer 1

In order to use the month and year picker you need to use the Flatpickr option static: true. This way it will not hide behind the modal.

$(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>