Flatpicker 签入签出

Question

我正在尝试 flatpickr 中给出的示例之一，即签入签出。该示例运行良好，但是当我在本地计算机中使用相同的语法时，它无法正常工作，例如退房日期能够 select 入住日期的前一个日期。

var check_in = document.getElementById("check_in_date").flatpickr({
    altInput: true,
    altFormat: "F j Y",
    minDate: new Date()
});
var check_out = document.getElementById("check_out_date").flatpickr({
    altInput: true,
    altFormat: "F j Y",
    minDate: new Date()
});

check_in.config.onChange = function(dateObj) {
    check_out.set("minDate", dateObj.fp_incr(1));
};
check_out.config.onChange = function(dateObj) {
    check_in.set("maxDate", dateObj.fp_incr(-1));
}

Answer 1

这是有效的

check_in_date = flatpickr("#check_in_date", {
    onChange: function(selectedDates, dateStr, instance) {
        check_out_date.set('minDate', selectedDates[0]);
    }
});
    
check_out_date = flatpickr("#check_out_date", {});

<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/flatpickr/4.6.11/flatpickr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="check_in_date" name="checkin">
<input type="text" id="check_out_date" name="checkin">

Answer 2

此外，您还可以使用 Flatpickr Range Calendar。这样你只需要使用一个输入框。

$(document).ready(function() {
  const myFlatpickr = $('#myFlatpickr').flatpickr({
    mode: "range",
    altFormat: "F j Y",
    minDate: new Date()
  });

  $(document).on('click', '#myButton', function() {
    $("#myResponse").html(`<b>Date checkin:</b> ${myFlatpickr.selectedDates[0]} <br><b>Date checkout:</b> ${myFlatpickr.selectedDates[1]}`);
  });
});

<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/flatpickr/4.6.11/flatpickr.min.js"></script>
<input id="myFlatpickr" style="width:170px;">

<button id="myButton">View dates</button>

<div id="myResponse"></div>

Flatpicker 签入签出

Flatpicker check in check out

javascript

flatpickr