Question

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

一些快速参考：Examples，Formating tokens和Events

我正在尝试弄清楚如何使用两个相互依赖的日期时间选择器，以避免数据范围选择错误。

到目前为止，我有：

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

经过更多测试后，我能够提出这个解决方案。

我基本上已经在父级的onchange事件中添加了一个选择器。

$(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>

Answer 2

您正在搜索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>

flatpicker1 onChange事件可在flatpicker2上设置minDate。怎么样？

2 个答案: