Bootstrap 4 Datepicker block date range

Question

Before someone tries to flag this as a duplicate, I have search google for this type of requirement and have not found feasible answer.

The requirement is to have a startDate and endDate datepicker using Bootstrap 4.

The start date can’t be greater than today - 1 year, but the end date must be greater than start date + 1 year. For example, for the start date - today is 6/4/2020 so we need to block from today to 6/4/2019. Then dates prior to 6/4/2019 should be enabled / selectable.

The other requirement is to have the end date picker start at the date chosen from the start date picker plus 1 year.

Here is the code I currently have and seems to work ok for blocking the date range from todays date minus one year

$("#UIStartDate").datepicker({ autoclose: true, endDate: '-365d' });

$("#UIEndDate").datepicker({


});

Im not sure how to set the start date of the end date to where date chosen from the start date picker plus 1 year. The range between the two dates can’t be less than 1 year difference

Any help would be appreciated.

Answer 1

Try using methods from this link instead - https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html. With it, you can pretty easily set your start or end date by following this convention:

$('#UIEndDate').datepicker('setStartDate', new Date(2020, 5, 6));

Then use getFullYear() method to extract year of the start date if you don't already have it stored and set end date with incrementing year part by one.