javascript 日期选择器flatpickr.js

Posted 2021-05-04

<?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,
        });

    });


});