multiple flatpickr issue when selecting the second one-CodePudding

I'm having trouble with multiple flatpickrs.

When I click on the first flatpickr it opens and I set the time When I click on the second flatpickr it sets default time and reopens the first one

const from1EditPickr= $("#kt_slot_from1_edit").flatpickr({
        enableTime: true,
        noCalendar: true,
        dateFormat: "H:i",
        time_24hr: true,
        minuteIncrement: 30
    });

const to1EditPickr = $("#kt_slot_to1_edit").flatpickr({
        enableTime: true,
        noCalendar: true,
        dateFormat: "H:i",
        time_24hr: true,
        minuteIncrement: 30
    });

I have set up the pickrs like this in my js file and after I retrieve some data with AJAX i try to put values on the flatpickrs

the data is set but the selection keep returning to the first pickr

Here is the html for the inputs:

<div >
      <input 
         id="kt_slot_from1_edit" type="text" readonly="readonly">
   </div>
   <div >
      <input 
         id="kt_slot_to1_edit" type="text" readonly="readonly">
   </div>

EDIT :

const startDatePickr = $("#kt_disabled_pickr").flatpickr({
    dateFormat: "d/m/Y",
    defaultDate: "today"
});

const from1EditPickr= $("#kt_slot_from1_edit").flatpickr({
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    time_24hr: true,
    minuteIncrement: 30
});

const to1EditPickr = $("#kt_slot_to1_edit").flatpickr({
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
    time_24hr: true,
    minuteIncrement: 30
});

$("#kt_disabled_pickr").prop('disabled', true)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<div >
  <input  id="kt_disabled_pickr" type="text" readonly="readonly">
</div>
<br/>
<div >
  <input  id="kt_slot_from1_edit" type="text" readonly="readonly">
</div>
<br/>
<div >
  <input  id="kt_slot_to1_edit" type="text" readonly="readonly">
</div>

But It weardly works :/

CodePudding user response：

your html seems to work

EDIT

const from1EditPickrDisabled = $("#kt_slot_from1_edit_disabled").flatpickr({
  enableTime: true,
  noCalendar: true,
  dateFormat: "H:i",
  time_24hr: true,
  minuteIncrement: 30
});

const from1EditPickr = $("#kt_slot_from1_edit").flatpickr({
  enableTime: true,
  noCalendar: true,
  dateFormat: "H:i",
  time_24hr: true,
  minuteIncrement: 30
});

const to1EditPickr = $("#kt_slot_to1_edit").flatpickr({
  enableTime: true,
  noCalendar: true,
  dateFormat: "H:i",
  time_24hr: true,
  minuteIncrement: 30
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<div >
  <input  disabled id="kt_slot_from1_edit_disabled" type="text" readonly="readonly">
</div>
<br/>
<div >
  <input  id="kt_slot_from1_edit" type="text" readonly="readonly">
</div>
<br/>
<div >
  <input  id="kt_slot_to1_edit" type="text" readonly="readonly">
</div>

can you provide an example of the issue ?