Событие changeDate возвращает пустой массив при нажатии на ту же дату в bootstrap DatePicker (представление календаря)? - PullRequest
Новая
       48

Событие changeDate возвращает пустой массив при нажатии на ту же дату в bootstrap DatePicker (представление календаря)?

0 голосов
/ 14 апреля 2020

Итак, bootstrap datepicker возвращает пустую дату, если я снова нажму на ту же дату. Однако, как я узнаю, какая дата снова нажата пользователем?

Например, в приведенном ниже календаре я нажал 24 апреля. Тогда событие changeDate вернет меня ниже массива. Что хорошо для меня: enter image description here enter image description here

Таким образом, у кого-нибудь есть идеи о том, как узнать, какая дата снова нажимается пользователем? Например, как я могу определить, что пользователь повторяется 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);
        } 
        });

1 Ответ

0 голосов
/ 22 апреля 2020

Я думаю, что наличие даты клика является разумным требованием, поэтому стоит внести изменение в исходный код bootstrap-datepicker.

Итак, если вы используете минимизированную версию, есть часть, которая идет ( ctrl + f для 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.

...