$(function(){
$( ".cal_date" ).datepicker({
format: 'yyyy-mm-dd',
todayHighlight:true,
viewDate:true,
multidate: true,
})
.on('changeDate', function(e) {
console.log(e.format());
}
)
$( "#datepicker_12492" ).datepicker('setDates',["2022-03-12","2022-03-15","2022-03-18","2022-03-13","2022-03-31"]);
});<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet">
<div class="cal_date" id="datepicker_12492"></div>I have multiple bootstrap datepickers on a page and each one will select multiple dates and save them to database. This works using onchangedata and e.format(). The problem is when the calendar is loaded with the saved dates and you try to unselect a saved one when there are multiple dates. e.format() doesn't return the selected date. In the example, if you select 2022-03-15, it will show 2022-03-31 in the changeDate function.
$( ".cal_date" ).datepicker({
format: 'yyyy-mm-dd',
todayHighlight:true,
viewDate:true,
multidate: true,
})
.on('changeDate', function(e) {
console.log(e.format());
});
$( "#datepicker_userid" ).datepicker('setDates',["2022-03-12","2022-03-15","2022-03-18","2022-03-13","2022-03-31"]);
I am sure it is something easy I am missing, but any help is appreciated.
Thanks!