Jquery datepicker fixed maxrange 365 days between 2 inputs

Question

I have 2 jQuery datepicker inputs

And I set default settings on like this:

$("#polis_date_from").datepicker({
  uiLibrary: "bootstrap4",
  changeYear: true,
  changeMonth: true,
  dateFormat: "yy.mm.dd",
  yearRange: "-0:+1"
});

$("#polis_date_to").datepicker({
  uiLibrary: "bootstrap4",
  changeYear: true,
  changeMonth: true,
  dateFormat: "yy.mm.dd",
  maxDate: "+365d"
});

$("#polis_date_from").datepicker("setDate", new Date());

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/theme.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<input id="polis_date_from" placeholder="YYYY.mm.dd" />
<input id="polis_date_to" placeholder="YYYY.mm.dd" />

But the problem is that person can change date in #polis_date_from datepicker, from example: 2024.09.09 .

And the second datepicker #polis_date_to still will have maxRange from today + 365d.

How to change dynamically maxDate to always be +365d from the date in #polis_date_from?

I've tried to write this but that didn't work:

$("#polis_date_from").on("change", async function(e) {
    var today = new Date().getTime();

    var polis_date_from_date = new Date($("#polis_date_from").val()).getTime();

    var timeDiff = Math.abs(polis_date_from_date - today)

    var daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24))

    $("#polis_date_to").datepicker({
        maxDate: `+${365 + daysDiff}d`
    });
})

Answer 1

When user select date on your #polis_date_from datepicker, get that date and add a year to it. And set this value the maxDate on you #polis_date_to datepicker. See the following example.

$("#polis_date_from").datepicker({
  uiLibrary: "bootstrap4",
  changeYear: true,
  changeMonth: true,
  dateFormat: "yy.mm.dd",
  yearRange: "-0:+1",
  onSelect: function() {
    var maxDate = $('#polis_date_from').datepicker('getDate');
    maxDate.setFullYear(maxDate.getFullYear() + 1);
    $("#polis_date_to").datepicker("change", {
      maxDate: maxDate
    });
  }
});

$("#polis_date_to").datepicker({
  uiLibrary: "bootstrap4",
  changeYear: true,
  changeMonth: true,
  dateFormat: "yy.mm.dd",
  maxDate: "+365d"
});

$("#polis_date_from").datepicker("setDate", new Date());

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/theme.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<input id="polis_date_from" placeholder="YYYY.mm.dd" />
<input id="polis_date_to" placeholder="YYYY.mm.dd" />