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

Please show us what you actually tried, instead of just telling us that you tried something & it did not work as intended. — C3roe
– C3roe, Commented Aug 7, 2023 at 8:43

Kiran Shahi · Accepted Answer · 2023-08-07 08:51:31Z

0

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" />

answered Aug 7, 2023 at 8:51

Kiran Shahi

8,0109 gold badges41 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ad0rfin Over a year ago

when I try to choose date of next month in "polis_date_from", "polis_date_to" can't choose more, than 0 days, that means that i can only pick today date for "polis_date_to".

Kiran Shahi Over a year ago

I don't understand your issue, can you clarify it more clearly what you want to achieve?

Kiran Shahi Over a year ago

You mean your minimum date must be the value of polis_date_from ?

ad0rfin Over a year ago

I tried to remove from "maxDate.setFullYear(maxDate.getFullYear() + 1);" "+1" and it caused problems (can't choose day more, than +0 day), but if I keep it, then I got 366 max days that can be keeped. Example: 2023.09.09 + 365days = 2024.09.08, not 2024.09.09

Kiran Shahi Over a year ago

instead of maxDate.setFullYear(maxDate.getFullYear() + 1) you can add days with maxDate.setDate(maxDate.getDate() + 365); also

|

Collectives™ on Stack Overflow

Jquery datepicker fixed maxrange 365 days between 2 inputs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related