var arrival = $('#datepicker');
var departure = $('#datepicker1');
arrival.flatpickr({
dateFormat: "d-m-Y",
disableMobile: true,
locale: "de",
minDate: "today",
onChange: function(selectedDates, dateStr, instance) {
departure.flatpickr({
dateFormat: "d-m-Y",
enableTime: false,
minDate: dateStr,
});
departure.removeAttr('readonly');
arrival.removeAttr('readonly');
}
});
departure.flatpickr({
dateFormat: "d-m-Y",
disableMobile: true,
locale: "de",
minDate: "today",
onChange: function(selectedDates, dateStr, instance) {
arrival.flatpickr({
dateFormat: "d-m-Y",
enableTime: false,
minDate: dateStr,
});
departure.removeAttr('readonly');
arrival.removeAttr('readonly');
}
});
Hi everybody I should create a booking form with Flatpickr and should get departure date +1 as arrival date but this is first time for me to as Flatpickr , if can someone help?
Thank you
I have found a solution using new Date(selectedDates).fp_incr(1) in combination with the Flatpickr config function onChange.
Example:
$(document).ready(function() {
let arrival = $('#datepicker');
let departure = $('#datepicker1');
arrival.flatpickr({
dateFormat: "d-m-Y",
disableMobile: true,
//locale: "de",
minDate: "today",
onChange: function(selectedDates, dateStr, instance) {
//departure.set('maxDate', new Date(dateStr).fp_incr(5));
departure.flatpickr({
dateFormat: "d-m-Y",
enableTime: false,
minDate: new Date(selectedDates).fp_incr(1), // add 1 day
//new Date(dateStr).fp_incr(1)
});
departure.removeAttr('readonly');
arrival.removeAttr('readonly');
}
});
departure.flatpickr({});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script>
<input id="datepicker" style="width:200px;">
<input id="datepicker1" style="width:200px;">