flatpicker1 onChange 事件在 flatpicker2 上设置 minDate。如何？

Question

我刚刚下载了flatpickr，它是 JavaScript 中的日期时间选择器。

一些快速参考：示例、格式化令牌和事件

我试图弄清楚如何使用两个日期时间选择器，它们需要相互依赖以避免数据范围选择错误。

到目前为止我有：

确保用户只能选择 2019 年的日期。inputText1 的时间始终为 00:00:00。

去做：

使用 inputText1 onChange 事件将 inputText2 minDate 设置为等于 inputText1 minDate。

inputText2 时间必须始终以 23:59:59 结束

$(document).ready(function(){

  $("#inputText1").flatpickr({
    minDate: "2019-01",
    maxDate: "2019-12",
    dateFormat: "Y-m-d H:i:S",
    // When this input changes, we set a min start date for input2 always equal or greater than from date.
    onChange: function(selectedDates, dateStr, instance) {
      $("#reportFromCustom").html(dateStr);

      // Any ideas?
      //$("#inputText2").flatpickr({ minDate: dateStr });
    }

  });

  $("#inputText2").flatpickr({
    dateFormat: "Y-m-d 23:59:59",
    // When this input changes, we set a min start date for input2 always equal or greater than from date.
    onChange: function(selectedDates, dateStr, instance) {
      $("#reportToCustom").html(dateStr);
    }

  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>


<table>
  <th>
    <tr>
    <strong>Select range</strong>
    </tr>
  </th>
  <tr>
  <td>From: <input type="text" id="inputText1"></td>
  <td>To:<input type="text" id="inputText2"></td>
  </tr>
</table>

Answer 1

您正在寻找set()方法

set(option, value)

set(option, value)

var date1 = $("#inputText1").flatpickr({
  minDate: "2019-01",
  maxDate: "2019-12",
  dateFormat: "Y-m-d H:i:S",
  onChange: function(selectedDates, dateStr, instance) {
    date2.set('minDate', dateStr)
  }
});

var date2 = $("#inputText2").flatpickr({
  dateFormat: "Y-m-d 23:59:59",
  onChange: function(selectedDates, dateStr, instance) {
    date1.set('maxDate', dateStr)
  }
});