flatpickr 中的最小数据范围

Question

我正在寻找在 flatpicks.js 中添加最小数据范围的解决方案例如，如果第一个选择的日期是 9 月 1 日，则下一个可选择的最小日期是 9 月 6 日。

我首先想到的是“禁用”选项，但显然，这行不通。 (Flatpicker min days for range date)

还有其他解决方案吗？

谢谢！

Answer 1

您可以使用 Flatpickr onChange 事件来实现。

在 onChange 事件中，我们将使用 minDate: new Date(start_date).fp_incr(increase_number_of_days);

向第二个 Flatpickr 添加 7 天

示例：

$(document).ready(function() {
  let start_date = $('#start_date');
  let end_date = $('#end_date');

  start_date.flatpickr({
    dateFormat: "d-m-Y",
    disableMobile: true,
    minDate: "today",
    onChange: function(selectedDates) {
      end_date.flatpickr({
        dateFormat: "d-m-Y",
        minDate: new Date(selectedDates).fp_incr(6), // add 7 days
      });
    }
  });

  end_date.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="start_date" style="width:200px;">
<input id="end_date" style="width:200px;">

flatpickr 中的最小数据范围

Minimum data range in flatpickr

javascript

flatpickr