CODEWITHSUNDEEP
javascriptasp.netbootstrap-datepicker
Harish Nayak
Harish Nayak

Reputation: 348

Bootstrap date picker on month select setDate not working

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();
};

Upvotes: 1

Views: 1366

Answers (1)

philw
philw

Reputation: 687

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

Upvotes: 1

Related Questions