Bootstrap date picker on month select setDate not working

Question

I tried the following code to change the date to end of the month on month change, but date is not changing.

here is my aspx code:

<div class="input-group date toDatePicker" id="toDate">
    <asp:TextBox ID="txt_todate" runat="server" TabIndex="2" class="form-control toDatePicker" placeholder="Select Date"></asp:TextBox>
        <span class="input-group-addon">
           <span class="glyphicon glyphicon-calendar"></span>
        </span>
</div>

and js used is:

$('.toDatePicker').datepicker
orientation: "bottom left",
minViewMode: 1,
maxViewMode: 4,
autoclose: true,
format: "mm/dd/yyyy", 
}).on('changeMonth', function (value) {
var endDate = new Date(value.date);
var mm = endDate.getMonth() + 1; //January is 0!
var yyyy = endDate.getFullYear();
var dd = endDate.daysInMonth(mm, yyyy);
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
endDate = new Date(yyyy, mm, dd);
$('.toDatePicker').datepicker('setDate', endDate).datepicker('update');
});

function daysInMonth(month, year) {
  return new Date(year, month, 0).getDate();
};

Answer 1

Your problem is that the "changeMonth" event returns with e.date, where e.date is the current date. If the changeMonth event is caused by a click on a "next month" arrow, that makes sense. If it's caused by clicking on an "out of month date", then e.date is still the previous, not the new date. Without more information, I'd guess that's your issue.

If you want the newly selected date instead, then you need a 'changeDate' event instead, which delivers the new date as e.date.

See also this, which suggests the behaviour may be a defect: https://github.com/uxsolutions/bootstrap-datepicker/issues/2290

Documentation: https://bootstrap-datepicker.readthedocs.io/en/stable/events.html#changemonth