Date Picker flatpickr.js
<?php
loadFile("css", "flatpickr", "flatpickr.min");
loadFile("js", "flatpickr", "flatpickr.min");
// load datepicker language file based on current lang
$locale = "en";
$locale_file = $config->paths->templates . "lib/flatpickr/l10n/" . $locale . ".js";
if(file_exists($locale_file)) {
loadFile("js", "flatpickr/l10n", "$locale");
}
?>
<form action="./" method="POST">
<input class="datePicker" type="text" name="check_in" placeholder="Check In" required />
<input class="datePicker2" type="text" name="check_out" placeholder="Check Out" required />
</form>
$(document).ready(function() {
// set localization (laod localization file from from l10ns folder)
flatpickr.localize(flatpickr.l10ns.en);
$(".datePicker").flatpickr({
dateFormat: "d M Y",
altInput: true,
altFormat: "d M Y",
minDate: "today",
});
// For mobile, need to init flatpickr for each input
$(".datePicker2").flatpickr({
dateFormat: "d M Y",
altInput: true,
altFormat: "d M Y",
minDate: "today",
});
$(".datePicker").on('change', function(e) {
/**
* When date1 is set, make it as minimum date for date2
*
*/
var date1 = $("input[name=check_in]").val();
var newMinDate = new Date(date1);
$(".datePicker2").flatpickr({
dateFormat: "d M Y",
altInput: true,
altFormat: "d M Y",
minDate: newMinDate,
});
});
});