尝试在两个输入的 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 变量现在只是元素而不是元素的值