当您在引导程序日期选择器（日历视图）中单击同一日期时，changeDate 事件返回空白数组？答案

【问题标题】：changeDate event return blank array when you click on same date in bootstrap datepicker(calendar view)?当您在引导程序日期选择器（日历视图）中单击同一日期时，changeDate 事件返回空白数组？
【发布时间】：2020-04-14 00:32:05
【问题描述】：

因此，如果我再次单击相同的日期，则引导 datepicker 将返回空白日期。但是，我怎么知道用户再次点击了哪个日期？

例如，在下面的日历中，我点击了 4 月 24 日。然后 changeDate 事件将在数组下方返回我。这对我来说很好：

那么任何人都知道如何知道用户再次点击了哪个日期？比如我如何检测到用户在 24 日被重新点击？

我的代码：日期选择器的初始化：

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

【问题讨论】：

你可以有一个click bool，如果用户第一次点击那个按钮，bool的值会变成false，这样你就可以处理第一次点击了。
对不起，但我想要更多记录选择和未选择的日期。因此，使任何布尔真/假都无济于事，因为我第二次单击其他日期然后它也使它成为真的。需要一个每次都有效的解决方案，它会告诉我点击了哪个日期。
看看api.jquery.com/one
你能写一个答案，这将如何跟踪日期？我看不到，这将如何给我未选择的日期。如果它正在执行，那么下一次会发生什么。我找不到这个有用的

标签： bootstrap-datepicker

【解决方案1】：

我认为有点击日期是一个合理的要求，值得对bootstrap-datepicker的源代码进行更改。

所以，假设你使用的是缩小版，有一部分是（ctrl+f for element.trigger）：

this.element.trigger({
   type: b,
   date: e,
   viewMode: this.viewMode,
   dates: a.map(this.dates, this._utc_to_local),
   ...
})

只需添加一个clickedDate 属性：

this.element.trigger({
   type: b,
   date: e,
   clickedDate: this.viewDate, // <-- added 
   viewMode: this.viewMode,
   dates: a.map(this.dates, this._utc_to_local),
   ...
})

现在，在您的changeDate 处理程序中，您可以访问event.dates 和event.clickedDate。

【讨论】：