Second Bootstrap Datepicker Doesn't Autoclose After Modifying Via onChange in First Datepicker

Question

I have 2 datepickers - startDate and endDate. endDate works great on its own until it is modified using the on('changeDate') of startDate. When endDate is modified using startDate, it doesn't autoclose upon selecting the new date (another strange effect is that when pressing the mouse on the new date, the old date appears in the text box until the mouse is released, where it is replaced with the selected date).

    $('#startDate.datepicker').datepicker({
        format: 'dd M yyyy',
        todayBtn: "linked",
        autoclose: true,
        todayHighlight: true
    }).on('changeDate', function (selected) {
        var minDate = new Date(selected.date.valueOf());
        $('#endDate.datepicker').datepicker({ format: 'dd M yyyy' }); // <--THIS IS THE LINE ADDED
        $('#endDate.datepicker').datepicker('setStartDate', minDate);
        $('#endDate.datepicker').datepicker('setDate', minDate); // <--THIS IS THE LINE ADDED
    })
    ;

$('#endDate.datepicker').datepicker({
    format: 'dd M yyyy',
    todayBtn: "linked",
    autoclose: true
});`

Edit - I've changed the endDate datepicker to kick out an alert message when the date is changed. This logic isn't triggered if the startDate is selected first (it is triggered if the endDate is selected first though however).

    $('#endDate.datepicker').datepicker({
     format: 'dd M yyyy',
     todayBtn: true,
     autoclose: true
    }).on('changeDate', function () {
    alert("here");
    });

Tom Bennett Tom Bennett · Accepted Answer · 2020-08-03T22:08:12

Turns out all it needed was wrapping in the below block. I'm not sure why this is required however as the script is the last thing in the body of my MVC5 View

$(document).ready(function () {
});

Second Bootstrap Datepicker Doesn't Autoclose After Modifying Via onChange in First Datepicker

1 Answers