Flatpickr datepicker dialog is not displaying

Question

I am using flatpickr datepicker to allow users to choose a date. However, the datepicker dialog is not showing up in most of the cases, even though the input field is visible when I inspect. Moreover, even though I am not using flatpickr-months, it shows up on the UI in a very weird manner. What could be causing the issue?

JQuery

flatpickr('.flatpickr.js-flatpickr-date', {
      enableTime: false,
      dateFormat: "Y-m-d"
    });

HTML

<input type="date" class="flatpickr js-flatpickr-date" name="date-planted" placeholder="Select date here"/>

Output

The flatpickr datepicker does not show up.

This is the flatpickr-months output I am talking about which is nowhere specified by me in the code and is showing up unnecessarily in weird manner

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 other elements.

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