changeDate event return blank array when you click on same date in bootstrap datepicker(calendar view)? - bootstrap-datepicker

Question

So bootstrap datepicker return blank date if I click the same date again. However, how I know which date is again clicked by the user?
For example in below calendar, I clicked on 24th of April. Then changeDate event will return me below the array. Which is fine for me:
So anyone has any idea on how to know which date is again clicked by the user? Like how I can detect that the user is reclicked on the 24th?
My code:
Init of datepicker:
var DatePicker = {
hideOldDays: function(){ // hide days for previous month
var x = $('.datepicker .datepicker-days tr td.old');
if(x.length > 0){
x.css('visibility', 'hidden');
if(x.length === 7){
x.parent().hide();
}
}
},
hideNewDays: function(){ // hide days for next month
var x = $('.datepicker .datepicker-days tr td.new');
if(x.length > 0){
x.hide();
}
},
hideOtherMonthDays: function(){ // hide days not for current month
DatePicker.hideOldDays();
DatePicker.hideNewDays();
}
};
var arrows;
if (KTUtil.isRTL()) {
arrows = {
leftArrow: '<i class="la la-angle-right"></i>',
rightArrow: '<i class="la la-angle-left"></i>'
}
} else {
arrows = {
leftArrow: '<i class="la la-angle-left"></i>',
rightArrow: '<i class="la la-angle-right"></i>'
}
}
var date = new Date();
var active_dates_1 = ['13/3/2020','14/3/2020','15/3/2020','16/3/2020','17/3/2020','18/3/2020','20/3/2020','21/3/2020','22/3/2020','23/3/2020','24/3/2020','25/3/2020','26/3/2020','27/3/2020','28/3/2020','29/3/2020','30/3/2020','31/3/2020','2/4/2020','3/4/2020','5/4/2020','16/4/2020','17/4/2020',];
var active_dates_2 = ['1/4/2020','6/4/2020','7/4/2020','8/4/2020','9/4/2020','10/4/2020','11/4/2020','12/4/2020','15/4/2020','20/4/2020',];
var active_dates_3 = ['4/4/2020','13/4/2020','14/4/2020','24/4/2020','24/4/2020',];
date.setDate(date.getDate()+1);
$('#manage_datepicker_1').datepicker({
rtl: KTUtil.isRTL(),
todayHighlight: true,
templates: arrows,
startDate: date, //disable all old dates
setDate: date, //tomorrow's date allowed
multidate: true,
format: 'dd/mm/yyyy',
endDate: "25/04/2020",
beforeShowDay: function(date){
var d = date;
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
var formattedDate = curr_date + "/" + curr_month + "/" + curr_year
if ($.inArray(formattedDate, active_dates_1) != -1){
return {
classes: 'disabled bookedDates1'
};
}
if ($.inArray(formattedDate, active_dates_2) != -1){
return {
classes: 'disabled bookedDates2'
};
}
if ($.inArray(formattedDate, active_dates_3) != -1){
return {
classes: 'disabled bookedDates3'
};
}
return;
}
//maxDate: '28/12/2019'
});
$('#manage_datepicker_1').datepicker().on('show', function(event) {
DatePicker.hideOtherMonthDays(); //hide other months days from current month view.
}).on('changeDate', function(event) {
var storage = new Array();
console.log(event);
for (var i = 0; i < event.dates.length; i++) {
var formatted_date = moment(event.dates[i]).format('DD/MM/YYYY');
storage.push(formatted_date);
}
});

Answer 1

I think that having the clicked date is a reasonable requirement, that worth introducing a change into the source code of bootstrap-datepicker.
So, assuming you're using the minified version, there's a part that goes (ctrl+f for element.trigger):
this.element.trigger({
type: b,
date: e,
viewMode: this.viewMode,
dates: a.map(this.dates, this._utc_to_local),
...
})
Just add a clickedDate property:
this.element.trigger({
type: b,
date: e,
clickedDate: this.viewDate, // <-- added
viewMode: this.viewMode,
dates: a.map(this.dates, this._utc_to_local),
...
})
So that now, inside your changeDate handler, you could access event.dates as well as event.clickedDate.