尝试在两个输入的 jquery datepicker 中设置最小和最大时间日期

Question

So I am working on a project for my classes and I had to set minimum and maximum date for two inputs. First one is being set from now to 12 months from now, and the other was meant to be set from date which was picked in the first input field to 12 months from now.

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

this is my 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,
            });
        })

On the preview in a browser it works only for last session. How can I fix this?

Answer 1

you have to use change event on #dateFrom, so whenever the value of the input is changed,the minDate property of the datepicker event get the current input value of #dateFrom

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

the final code should be like this:

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

notice the chosenDate variable is now just the element not the value of the element