Как заблокировать даты в DateRangePicker с данными из массива

у меня есть daterangepicker bootstrap, в котором я хотел бы сделать ряд условий, чтобы на основе дат в базе данных они блокировались и меняли цвет. Моя проблема в том, что я не очень хорошо знаю, как сказать DateRangePicker, чтобы получить мне даты массива, которые я получаю из php, не исчезая из интернета и не оставляя белого поля.

я редактирую: мой json, который я получаю в представлении, не правильно интерпретирует datepicker

Мой daterangepicker это: 

 <script>
  // Aqui recibimos el json de PHP
  var daysData = <?= $data) ?>;
  $( function() {
    $( 'input[name="datefilter"]').daterangepicker({

         isInvalidDate: function(date) { 
          var year = date.year();
          var month = date.month() + 1;
          var day = date.date();
          var valid = false; // default css class

          if(typeof daysData[year] != 'undefined'){
              if(typeof daysData[year][month] != 'undefined'){

                  if(typeof daysData[year][month][day] != 'undefined'){
                   console.log(year, month, day,  daysData[year][month][day]);
                      dayData = daysData[year][month][day]; 
                      //if (dayData['news'] == true){
                        valid = true;
                      //}
                  }
              }
          }
          return valid;
        },

      isCustomDate: function(date) { 
        var year = date.year();
        var month = date.month() + 1;
        var day = date.date();

        var daySettings = 'day_green'; // default css class
        if(typeof daysData[year] != 'undefined'){
            if(typeof daysData[year][month] != 'undefined'){

                if(typeof daysData[year][month][day] != 'undefined'){
                 console.log(year, month, day,  daysData[year][month][day]);
                    dayData = daysData[year][month][day]; 
                    //if (dayData['news'] == true){
                      daySettings = 'day_red';
                    //}
                }
            }
        }
        return daySettings;
    },               
});
</script>

переменная $data, которую я получаю от php, имеет следующий json (я уже преобразую его в контроллер) 

[{
    "area_id": null,
    "title": "Comida",
    "start": "2018-08-13 00:00:00"
}, {
    "area_id": null,
    "title": "Conferencia",
    "start": "2018-08-19 00:00:00"
}, {
    "area_id": null,
    "title": "Meeting",
    "start": "2018-08-27 00:00:00"
}, {
    "area_id": null,
    "title": "Cumplea\u00f1os",
    "start": "2018-08-05 00:00:00"
}, {
    "area_id": null,
    "title": "Fecha disponible",
    "start": "2018-08-14 00:00:00"
}, {
    "area_id": null,
    "title": "Fechas No Disponibles",
    "start": "2018-07-30 00:00:00"
}, {
    "area_id": null,
    "title": "Consultar Fecha",
    "start": "2018-08-06 00:00:00"
}, {
    "area_id": 1,
    "title": "vacacion",
    "start": "2018-08-17 00:00:00"
}, {
    "area_id": 1,
    "title": "vacacion",
    "start": "2018-08-17 00:00:00"
}, {
    "area_id": 1,
    "title": "vacacion",
    "start": "2018-08-17 00:00:00"
}, {
    "area_id": 1,
    "title": "vacacion",
    "start": "2018-08-17 00:00:00"
}, {
    "area_id": 1,
    "title": "vacacion",
    "start": "2018-08-17 00:00:00"
}, {
    "area_id": 1,
    "title": "vacacion",
    "start": "2018-08-17 00:00:00"
}, {
    "area_id": 1,
    "title": "vacacion",
    "start": "2018-08-17 00:00:00"
}, {
    "area_id": 1,
    "title": "vacacion",
    "start": "2018-08-17 00:00:00"
}, {
    "area_id": 1,
    "title": "vacacion",
    "start": "2018-08-17 00:00:00"
}, {
    "area_id": 1,
    "title": "vacacion",
    "start": "2018-08-17 00:00:00"
}, {
    "area_id": 1,
    "title": "vacacion",
    "start": "2018-08-17 00:00:00"
}, {
    "area_id": 1,
    "title": "vacacion",
    "start": "2018-08-17 00:00:00"
}, {
    "area_id": 1,
    "title": "vacacion",
    "start": "2018-08-17 00:00:00"
}, {
    "area_id": 1,
    "title": "vacacion",
    "start": "2018-08-17 00:00:00"
}, {
    "area_id": 1,
    "title": "vacacion",
    "start": "2018-08-17 00:00:00"
}]

Как я могу использовать этот json, чтобы все даты, поступающие из bd, были заняты, и пометить их другим цветом в DateRangePicker? Я думал о том, чтобы удалить данные из массива в php и передать ему только дату, но я хочу сохранить area_id, чтобы сделать некоторые условия и поставить разные цвета.

Спасибо заранее.

Author: Peisou, 2018-08-17
Source

1 answers

Для date range picker у вас есть две функции:

  • IsInvalidDate. эта функция выполняется перед созданием календаря и помечает ячейку дня как проверенную или недействительную в зависимости от ее возврата: пример: 

    $('input[name="datefilter"]').daterangepicker({
  isInvalidDate: function (date) {
    var r = false;
    if (date == LoQueSea) r = true;
    return r;
  }
});

    Если вы возвращаете true: invalid, false: validate. (проверяет или недействителен, если выбирается)

  • IsCustomDate. эта функция выполняется перед созданием календаря и даст вам пользовательские классы для ячейки, каждая ячейка по отдельности в течение дня. Пример:

    $('input[name="datefilter"]').daterangepicker({
  isCustomDate: function (date) {
    var clase = ''; //no queremos ninguna clase
    if (date == LoQueSea) clase = 'warning';
    return date ;
  }
});

    Итак, ячейки, которые мы хотим, будут иметь класс warning

JSON

Чтобы не зацикливаться каждый раз, когда вызывается одна из этих функций, лучше всего построить JSON, как только мы его получили.

Поскольку для нас важно поле start, мы помещаем его в качестве key каждого значения: 

var newA = [];
for( j of daysData){
  let d = moment(j["start"]).format("DD/MM/YYYY");
  newA[d] = j;
}

Где newA новый json построен.

Чтобы увидеть его более графическим: 

[
   "05/08/2018":{
      area_id:null,
      title:"Cumpleaños",
      start:"2018-08-05 00:00:00"
   },
   ​
"06/08/2018":{
      area_id:null,
      title:"Consultar Fecha",
      start:"2018-08-06 00:00:00"
   },
...]

Отсюда, если мы используем ваш код и на основе того, что у вас уже есть:

$('input[name="datefilter"]').daterangepicker({

    isInvalidDate: function(date) { 
      var valid = false; 
      let d =  date.format("DD/MM/YYYY"); // <-- aqui construimos la key del array
      if(typeof newA[d] != 'undefined'){
        dayData = newA[d]
        valid = true;
      }
      return valid;
    },
   isCustomDate: function(date) { 
      var daySettings = 'day_green';
      let d =  date.format("DD/MM/YYYY"); // <-- aqui construimos la key del array
      if(typeof newA[d] != 'undefined'){
        dayData = newA[d]
        daySettings = 'day_red';
      }
      return daySettings;
    },
});

Некоторые разъяснения

  • я удалил некоторый код, чтобы очистить ответ, и это было понятно.
  • Чтобы класс css работал на недействительных датах (больше всего на свете background-цвет), вы должны сделать это !important

И затем, хотя я думаю, что это не связано с ответом, это нормально , что вы знаете, что даты, DateRange picker, использует moment.js, поэтому, чтобы вытащить формат даты, я использовал свои собственные функции momentjs

У вас есть пример здесь

 2
Author: Txmx, 2018-08-22 12:14:27