datepicker 2 fields

Hi @martiv97,

You can add the following code in the advanced date configuration section of the first date field (arrival field) –

{
onChange: function(selectedDates, dateStr) {
       var date = selectedDates[0];

       date.setDate(date.getDate());

       flatpickr('.endDate', {
        minDate: date,
});
    }
}

Also, in the second date field (departure field) add the class endDate as the Element class in that field.

That should allow you to only choose the date in the departure field after or equal to the arrival date.

I hope this is what you are looking for.

Thank you.

Hi @martiv97,

Glad to hear that the code is working.

You can change the date format of the departure field by adding the date format (dateFormat: “d/m/Y”) directly in the code.

This is the updated code –

{
onChange: function(selectedDates, dateStr) {
       var date = selectedDates[0];

       date.setDate(date.getDate());

       flatpickr('.endDate', {
        minDate: date,
        dateFormat: "d/m/Y",
});
    }
}

Thank you!

Hi @martiv97,

I am happy to help!

We would very much appreciate it if you could spare a few minutes to share your experience and provide us with a review if you haven’t done it already.

This feedback helps us improve our ability to provide you with the best possible support.

To write a review, please visit here: https://ww.wp.xz.cn/support/plugin/fluentform/reviews/#new-post

Thank you!