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

Question

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

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

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

到目前为止，我有：

确保用户只能选择 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)

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

<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 2

经过一些更多的测试，我能够想出这个解决方案。

我基本上在父级的 onchange 事件中添加了一个 flatpicker。

$(document).ready(function(){

  $("#reportCustomDisplay").html('Nothing Selected');

  // Initially always disabled.
  $("#inputText2").prop('disabled', true);

  // DATE FROM
  $("#inputText1").flatpickr({
    // First Month of year
    minDate: "2019-01-01",
    // Last  Month of year
    maxDate: "2019-12-31",
    // Format it to a mySQL datetime friendly format
    dateFormat: "Y-m-d H:i:S",

    // When this input changes, we set a min start date 
    // for input2 always equal or greater than this.
    onChange: function(selectedDates, dateStr, instance) {

      // Set display from
      $("#reportFromCustom").html(dateStr);
      // Enable inputText2
      $("#inputText2").prop('disabled', false);
      // Set display to
      $("#reportToCustom").html('0000-00-00 00:00:00');
      // Set display progress
      $("#reportCustomDisplay").html('..to when?');

      // Recreate inputText2 with relative start date
      $("#inputText2").flatpickr({ 
        // inputText1 selected datetime
        minDate: dateStr, 
        // Last  Month of year
        maxDate: "2019-12-31",
        // Format it to a mySQL datetime friendly format
        dateFormat: "Y-m-d 23:59:59", 
        onChange: function(selectedDates, dateStr, instance) {
          // Set display to
          $("#reportToCustom").html(dateStr);
          // Set display progress
          $("#reportCustomDisplay").html('Click Get report!');
        }
      });
    }


  });

});

<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 v2</strong>
    </tr>
  </th>
  <tr>
    <td>From: <input type="text" id="inputText1"></td>
    <td>To:<input type="text" id="inputText2"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><strong>Status:</strong> <span id="reportCustomDisplay"></span></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>From: <span id="reportFromCustom"></span></td>
    <td>To: <span id="reportToCustom"></span></td>
  </tr>
</table>