How to block dates in a DateRangePicker with data from an array

Question

How to block dates in a DateRangePicker with data from an array

Navigation

#1 by (2 votes)

2

I have a bootstrap daterangepicker in which I would like to make a series of conditions so that according to the dates in the database they are blocked and change color. My problem is that I'm not sure how to tell the DateRangePicker to take the dates of the array I receive from the php without it disappearing from the web and leaving a white box.

EDIT: my json that I receive in the view, the datepicker does not interpret it correctly

My daterangepicker is this:

 <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>

The $ data variable I receive from php has the following json (already transforms it in the controller)

[{
    "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"
}]

How can I use this json to have all the dates that come from bd as they are occupied, and mark them with another color in the DateRangePicker? I was thinking about taking data from the array in php and passing it on just the date, but I want to keep the area_id to make conditions and put different colors.

Thanks in advance.

javascript php bootstrap daterangepicker

asked by Peisou 17.08.2018 в 11:29

source

1 answer

How to determine if the cell that has changed from a google sheet is in a list and how to put a trigger? Pass value from a select to modal select

score 2 · Accepted Answer

For date range picker you have two functions:

isInvalidDate . this function is executed before creating the calendar and will mark the cell of the day as valid or invalid depending on its return: example:
```
$('input[name="datefilter"]').daterangepicker({
  isInvalidDate: function (date) {
    var r = false;
    if (date == LoQueSea) r = true;
    return r;
  }
});
```
If you return true: invalid, false: valid. (valid or invalid, if selectable)
isCustomDate . This function is executed before creating the calendar and will give personalized classes to the cells, each cell being individual for the day. Example:
```
$('input[name="datefilter"]').daterangepicker({
  isCustomDate: function (date) {
    var clase = ''; //no queremos ninguna clase
    if (date == LoQueSea) clase = 'warning';
    return date ;
  }
});
```
So, the cells that we want will have the warning class

JSON

To avoid looping each time you call one of these functions, it is best to build the JSON once we have received it.

As what matters to us is the start field, we put it as the key of each value:

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

Where newA a new built json.

To see more graphic:

[
   "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"
   },
...]

From here, if we use your code and based on what you already have:

$('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;
    },
});

Some clarifications


I have removed some code to clear the answer, and it was understandable.

To make the css class work for you on the invalidated dates (most of all the background-color), you have to do it !important


And then, although I think it has nothing to do with the answer, it's fine   know that the dates, DateRange picker, use moment.js ,   Therefore, to use the format of the date, I used my own   functions of the momentjs

You have the example here