How to have a dynamic maximum end date in Bootstrap Date Picker

Question

I am using the following date picker on my website for a start and end date selection:

https://bootstrap-datepicker.readthedocs.org/en/latest/index.html

The rules are:

start date can be between today and + 30 days, no more
end date can be no more than 1 year after the selected start date

So when the form loads, I've set the endDate option to "+1y -1d" which works great. But if the customer picks a start date of +30 days for example, I need the endDate option on the second field to extend to "current start date +1y -1d" again.

I've started the code but really not sure how to acheive this:

<script type="text/javascript">
    $(function() {

        $(".startdate").datepicker({
            format: 'd MM yyyy',
            startDate: '+0d',
            endDate: '+30d',
            autoclose: true,
            startView: 0,
            minViewMode: 0,
            todayHighlight: true,
            orientation: "top"
        });
        $(".enddate").datepicker({
            format: 'd MM yyyy',
            startDate: '+1d',
            endDate: '+1y -1d',
            autoclose: true,
            startView: 0,
            minViewMode: 0,
            todayHighlight: true,
            orientation: "top"
        });

        $("#startdate").change(function() {

            var startdate = new Date (  $("#startdate").val() ) ;
            //alert(startdate);
            var newendatemaximum;

            $(".enddate").datepicker({
                endDate: ???????
            });
        });

    });
</script>

Work In Progress Solution:

$(".startdate").change(function() {
            //alert("start date change");
            var newendatemaximum = new Date (  $(".startdate").val() ) ;
            newendatemaximum.setYear(newendatemaximum.getFullYear() + 1);
            alert(newendatemaximum);
            $(".enddate").datepicker("option", "endDate", newendatemaximum);
        });

toddmo toddmo · Accepted Answer · 2015-11-25T17:44:33

You don't have to use json to set datepicker options. You can set them directly. Once you have the new max date that you want to use as a javascript date, you can just set that option directly:

    $("#startdate").change(function() {
        var newendatemaximum = new Date (  $("#startdate").val() ) ;
        newendatemaximum.setYear(newendatemaximum.getFullYear() + 1);
        $(".enddate").datepicker("option", "endDate", newendatemaximum);
    });

How to have a dynamic maximum end date in Bootstrap Date Picker

1 Answers