errors when using flatpicker calendar

1k Views Asked by Mohcen CH At 20 October 2024 at 03:40

as i followed the official docs of flatpickr in this link for some reason the date picker didn't appear

here is what i did i added this in my html head:

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

and this in my js file

import flatpickr from "flatpickr";


flatpickr("#myflatpickr", {});

in the html body where i have the input:

 <input name="deadline" placeholder="Deadline" id="myflatpickr" required>

Original Q&A

There are 1 best solutions below

arvie On 10 October 2020 at 17:18 BEST ANSWER

You can move it after the element is present in the DOM indeed as Paul T said. Or add a on document ready function to it. Couldn't reproduce the error message you've got.. Maybe just leave out the import/require part?:

<html>
  <head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  </head>
  <body>
    <div><input name="deadline" placeholder="Deadline" id="myflatpickr" required></div>
    <script type="text/javascript">
        flatpickr("#myflatpickr", {});
    </script>
  </body>
</html>

errors when using flatpicker calendar

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CALENDAR

Related Questions in DATETIMEPICKER

Related Questions in FLATPICKR

Trending Questions

Popular # Hahtags

Popular Questions