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

user3877838 · Accepted Answer · 2022-04-11 10:32:35Z

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
  });
});

answered Apr 11, 2022 at 10:32

user3877838

Sign up to request clarification or add additional context in comments.

1 Comment

riopiedra Sep 28 at 2:14

Thank you! That was the problem in my case!

Maria Mozgunova · Accepted Answer · 2025-10-23 10:59:58Z

0

Apparently, the styles for the flatpickr were not loaded.

Depending on how you installed `flatpickr`, you would need to include the flatpickr CSS stylesheet to resolve the issue.
You might simply need to include CSS with the <link> HTML tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

or add to assets:

@import 'flatpickr/dist/flatpickr.css';

I was looking to install the flatpickr with Laravel. Here are the sources I used to resolve the issue:
How do I load the CSS for flatpickr when I use npm to install it in Laravel?
Laravel + Flatpicker: How to Install using NPM

answered Oct 23 at 10:59

Maria Mozgunova

511 silver badge5 bronze badges

Collectives™ on Stack Overflow

Flatpickr datepicker dialog is not displaying

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related