Flatpickr initialisation fail

Question

I'm having trouble initializing the flatpickr from the input value.

This is the flatpickr HTML:

<div class="flatpickr">
<input name="test" value="2019-07-03" type="text" data-input>
<a class="input-button" title="toggle" data-toggle><i class="icon-calendar"></i></a>
</div>

This is the the config:

flatpickr(".flatpickr", {
    dateFormat: "d.m.Y",    
    weekNumbers: true,
    wrap: true
});

The calendar get initialized with the date 20.09.2019 but it should be 03.07.2019.

I also tried setting the date to a timestamp, but the initialization goes wrong too.

Answer 1

The dateFormat in the value attribute should match the dateFormat: "d.m.Y"

flatpickr(".flatpickr", {
  dateFormat: "d.m.Y",
  weekNumbers: true,
  wrap: true
});

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

<div class="flatpickr">
  <input name="test" value="03.07.2019" type="text" data-input>
  <a class="input-button" title="toggle" data-toggle>
    <i class="icon-calendar"></i>
  </a>
</div>