Flatpickr multiple datepicker in same page

Question

I realize a site in symfony and I use the flatpickr library for the selection of dates. that's what it's like now:

datepicker

So I have 2 datepicker who uses flatpickr which allows me to select a departure date with the time and a date back with the time too. My problem, when I select the first date, flatpickr shows me well the time selection but when I go on the second datepicker I can not select the time.

datepicker 1

datepicker 2

I wish I could select in the 2 inputs the date and the time.

Here is my JS code of my 2 inputs:

  var departure = $('#quick_booking_departure');
  var arrival = $('#quick_booking_arrival');

  departure.flatpickr({
    enableTime: true,
    dateFormat: "Y-m-d H:i",
    position: "above",
    disableMobile: true,
    locale: "fr",
    minDate: "today",
    onChange: function (selectedDates, dateStr, instance) {
      arrival.flatpickr({
        minDate: dateStr
      });
      departure.removeAttr('readonly');
      arrival.removeAttr('readonly');
    }
  });

  arrival.flatpickr({
    enableTime: true,
    dateFormat: "Y-m-d H:i",
    position: "above",
    disableMobile: true,
    locale: "fr",
    minDate: "today",
    onChange: function (selectedDates, dateStr, instance) {
      departure.flatpickr({
        minDate: 'today'
      });
      departure.removeAttr('readonly');
      arrival.removeAttr('readonly');
    }
  });

Thank you for your help.

Answer 1

It looks like your onChange function is the culprit adding enableTime: true allows time pick:

onChange: function(selectedDates, dateStr, instance) {
    arrival.flatpickr({
      enableTime: true,
      minDate: dateStr
    });
    departure.removeAttr('readonly');
    arrival.removeAttr('readonly');
  }

But look closer, when one of your pickers change you are completely re-initializing the other. So all the options you originally defined are getting reverted back to default except for what you are re-defining minDate