How to modify URL when changing month by clicking on the next/before month arrows using bootstrap datepicker

Question

I have a Bootstrap Datepicker and I'm trying to be able to modify the url by clicking on the next month arrow or month before arrow.

Datepicker example

When I pick some day on the calendar, the URL changes but I can't figure out how to change the URL by clicking on the arrows too.

My datepicker.js file looks like this:

$(function(){

$('#datetable')
        .datepicker({
            format: "dd/mm/yyyy",
            todayHighlight: true,
            clearBtn: true,
            daysOfWeekDisabled: [0, 6],
            daysOfWeekHighlighted: "0,6",
            changeMonth: false
        })
        .change(function() {
            let pickedDate = $("input").val();
            if (pickedDate){
                $("#showdate").text(
                `You picked ${pickedDate}.`);

                var date = $('#datetable').datepicker('getDate');

                day = date.getDate(date);
                month = date.getMonth(date) + 1;
                year = date.getFullYear(date);

                window.location.assign("https://bloxool-simple.testing.com.co/test/helloworld.php&year=" + year + "&month=" + month + "&day=" + day);
            } else {
                $("#showdate").text(
                    `No date chosen.`);
            }
        });
});

Many thanks for your help

Answer 1

This is my working solution:

 $(function () { $('#datetable').datepicker({ format: "dd/mm/yyyy", todayHighlight: true, clearBtn: true, daysOfWeekDisabled: [0, 6], daysOfWeekHighlighted: "0,6", changeMonth: false }).on("changeMonth", function(e) { var date = e.date; day = date.getDate(); month = date.getMonth()+1; year = date.getFullYear(); console.log(day+'/'+month+'/'+year); //window.location.assign("https://bloxool-simple.testing.com.co/test/helloworld.php&year=" + year + "&month=" + month + "&day=" + day); }).on("changeDate", function(e) { var date = e.date; day = date.getDate(); month = date.getMonth()+1; year = date.getFullYear(); console.log(day+'/'+month+'/'+year); //window.location.assign("https://bloxool-simple.testing.com.co/test/helloworld.php&year=" + year + "&month=" + month + "&day=" + day); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css'> <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js'></script> <div id="datetable"> <input id="reservationDate" type="hidden" placeholder="Choose a date" class="form-control py-4 px-4" /> </div>