嘗試在兩個輸入的 jquery datepicker 中設置最小和最大時間日期

Question

所以我正在為我的課程做一個項目，我必須為兩個輸入設置最小和最大日期。 第一個設置是從現在到 12 個月，另一個是從第一個輸入字段中選擇的日期設置到 12 個月。

<p>From: <input type="text" id="dateFrom"></p>
<p>To: <input type="text" id="dateTo"></p>

這是我的 JS

    var chosenDate = document.getElementById("dateFrom").value;
$( function() {
          $("#dateFrom").datepicker({
          dateFormat: "dd-mm-yy",
          changeMonth: true,
          changeYear: true,
          maxDate: '12M',
          minDate: '0',
            });
        })

      $( function() {
          $("#dateTo").datepicker({
          dateFormat: "dd-mm-yy",
          changeMonth: true,
          changeYear: true,
          maxDate: '12M',
          minDate: chosenDate,
            });
        })

在瀏覽器的預覽中，它僅適用於上次會話。 我怎樣才能解決這個問題？

Answer 1

你必須在#dateFrom 上使用change 事件，所以每當輸入的值改變時，datepicker 事件的minDate 屬性獲取#dateFrom 的當前輸入值

$("#dateFrom").change(() => {
$("#dateTo").datepicker("option", "minDate", chosenDate.value);
});

最終的代碼應該是這樣的：

var chosenDate = document.getElementById("dateFrom");
$(function() {
  $("#dateFrom").datepicker({
    dateFormat: "dd-mm-yy",
    changeMonth: true,
    changeYear: true,
    maxDate: "12M",
    minDate: "0"
  });
});
$(function() {
  $("#dateTo").datepicker({
    dateFormat: "dd-mm-yy",
    changeMonth: true,
    changeYear: true,
    maxDate: "12M",
    minDate: chosenDate.value
  });
  $("#dateFrom").change(() => {
    $("#dateTo").datepicker("option", "minDate", chosenDate.value);
  });
});

注意 selectedDate 變量現在只是元素而不是元素的值