Search code examples
javascriptjquerydatepickerflatpickr

flatpickr, link two input fields to get a period


I am trying to implement flatpickr with Jquery. So far so good.

I have the following code, which actually works :

flatpickr("#booking_start", {});
flatpickr("#booking_end", {});

However I would like to change this code into a period. I have tried to figure out how to do this with the flatpickr reference page :

But as soon as I add the code "onChange", I basically get an error. I know I am very likely making a syntax error, but I simply getting stuck at this point.

flatpickr("#booking_start", { onchange({ alert('hi there') }) });
flatpickr("#booking_end", {});

In the end I want to turn this into a period selector. Hence when you click start date, the start date should automatically set the minimum date for the end date.

But for now I am actually not getting any further.

Edit:

Seb Cesbron gave me the correct answer!

startPicker = flatpickr("#booking_start", {
  onChange: function(selectedDates, dateStr, instance) {
    endPicker.set('minDate', selectedDates[0]);
  }
});
endPicker = flatpickr("#booking_end", {});

Solution

  • Here is the right syntax

    startPicker = flatpickr("#booking_start", {
      onChange: function(selectedDates, dateStr, instance) {
        endPicker.set('minDate', selectedDates[0]);
      }
    };
    endPicker = flatpickr("#booking_end", {});