Search code examples
javascriptjqueryflatpickr

multiple flatpickr issue when selecting the second one

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

enter image description here

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 class="col-xl-9 fv-row fv-plugins-icon-container">
      <input class="form-control form-control-solid flatpickr-input"
         id="kt_slot_from1_edit" type="text" readonly="readonly">
   </div>
   <div class="col-xl-9 fv-row fv-plugins-icon-container">
      <input class="form-control form-control-solid flatpickr-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 class="col-xl-9 fv-row fv-plugins-icon-container">
  <input class="form-control form-control-solid flatpickr-input" id="kt_disabled_pickr" type="text" readonly="readonly">
</div>
<br/>
<div class="col-xl-9 fv-row fv-plugins-icon-container">
  <input class="form-control form-control-solid flatpickr-input" id="kt_slot_from1_edit" type="text" readonly="readonly">
</div>
<br/>
<div class="col-xl-9 fv-row fv-plugins-icon-container">
  <input class="form-control form-control-solid flatpickr-input" id="kt_slot_to1_edit" type="text" readonly="readonly">
</div>

But It weardly works :/

Solution

  • 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 class="col-xl-9 fv-row fv-plugins-icon-container">
  <input class="form-control form-control-solid flatpickr-input" disabled id="kt_slot_from1_edit_disabled" type="text" readonly="readonly">
</div>
<br/>
<div class="col-xl-9 fv-row fv-plugins-icon-container">
  <input class="form-control form-control-solid flatpickr-input" id="kt_slot_from1_edit" type="text" readonly="readonly">
</div>
<br/>
<div class="col-xl-9 fv-row fv-plugins-icon-container">
  <input class="form-control form-control-solid flatpickr-input" id="kt_slot_to1_edit" type="text" readonly="readonly">
</div>

    can you provide an example of the issue ?