Block in datepicker bootstrap date range from BD

Question

Block in datepicker bootstrap date range from BD

Navigation

#1 by (3 votes)

1

I have a daterangepicker which receives dates from the backend, to block those dates in the datepicker. I have been reading the documentation of moment.js, and its respective method isBetween , and also the plugin of range , besides some examples that I have seen. Since I've realized that I can only add single dates to block them, which is great, but I have many days that should be blocked, which is not yet functional. I tried to modify the method to use it but I really do not know how to do it since it does not throw me errors, it just does not work.

The javascript code that I have done so far is as follows:

  // here receive the json array from PHP to JS


 var daysData = <?= json_encode($data) ?>;
  var isArea = {{ Auth::user()->area_id }}
  var newA = [];
for( j of daysData){
  let start = moment(j["start"]);
  let end   = moment(j["end"]);

  for (let m = moment(start); m.diff(end, 'days') <= 0; m.add(1, 'days')) {
    newA[m.format('DD/MM/YYYY')] = j;
  }
}
console.log(daysData);
$('input[name="datefilter"]').daterangepicker({

isInvalidDate: function(date) {
    var valid = false ; // default css class
    let d =  date.format("DD/MM/YYYY");
    if(typeof newA[d] !== 'undefined'){
        if(newA[d].area_id !== isArea){
            if(newA[d].acept == 1){
                valid =  true;
            }
        }
    }
    return valid;
},
isCustomDate: function(date) {

  var daySettings = 'day_green';
  let d =  date.format("DD/MM/YYYY");
  if(typeof newA[d] !== 'undefined'){
       daySettings = 'day_red';
       if(newA[d].area_id == isArea){
           if(newA[d].acept == 0){
            daySettings = 'day_orange';
           }
        }
  }
  return daySettings;
},

EDITED and the json that I receive in the array after the loop in the view is this:

[17/08/2018: {…}, 18/08/2018: {…}, 22/08/2018: {…}, 23/08/2018: {…}, 
24/08/2018: {…}, …]
09/08/2018:
acept:0 
area_id: null
end: "2018-08-10"
start: "2018-08-09"
title:"asd"
__proto__:Object
10/08/2018:{area_id: null, title: "asd", start: "2018-08-09", end: "2018-08- 
10", acept: 0}
17/08/2018:{area_id: 1, title: "asd", start: "2018-08-17", end: "2018-08- 
18", acept: 1}
18/08/2018:{area_id: 1, title: "asd", start: "2018-08-18", end: "2018-08- 
22", acept: 1}
22/08/2018:{area_id: 1, title: "asdf", start: "2018-08-22", end: "2018-08- 
24", acept: 1}
23/08/2018:{area_id: 1, title: "asd", start: "2018-08-22", end: "2018-08- 
23", acept: 1}
24/08/2018:{area_id: 1, title: "asdf", start: "2018-08-22", end: "2018-08- 
24", acept: 1}
length:0
__proto__:Array(0)

but it's really not happening to me, and I've seen that the isBetween method does not exactly serve me for what I want to do. And I think I'm not coding it as it should.

Thank you very much in advance. Greetings.

javascript laravel

asked by Peisou 23.08.2018 в 15:48

source

1 answer

Show Item if True in Array Json add row to HTML table with JQuery in the Tbody

score 3 · Accepted Answer

In this case I think the easiest thing is just when you get the JSON is to create an array with all the dates that do not want to show.

If we start from such a json:

var daysData= [{
    "area_id": null,
    "title": "Comida",
    "start": "2018-08-13 00:00:00",
    "end": "2018-08-15 00:00:00",

}, {
    "area_id": null,
    "title": "Conferencia",
    "start": "2018-08-19 00:00:00",
    "end": "2018-08-22 00:00:00",
}, {
    "area_id": null,
    "title": "Meeting",
    "start": "2018-08-27 00:00:00",
    "end": "2018-08-29 00:00:00",
},
 {
    "area_id": null,
    "title": "Meeting",
    "start": "2018-09-27 00:00:00",
    "end": "2018-09-29 00:00:00",
}];

Then, when we arrive, we save the ones we do not want to show in newA :

var newA = [];
for( j of daysData){
  let start = moment(j["start"]);
  let end   = moment(j["end"]);

  for (let m = moment(start); m.diff(end, 'days') <= 0; m.add(1, 'days')) {
    newA.push(m.format('DD/MM/YYYY'));
    }
}

The for that is inside will use as a loop the days between start and end . And m will be 1 more day, so until it reaches 'end'.

Then newA is an Array with all the dates that we do not want to show:

newA = [
  "13/08/2018",
  "14/08/2018",
  "15/08/2018",
  "19/08/2018",
  "20/08/2018",
  "21/08/2018",
  "22/08/2018",
  "27/08/2018",
  "28/08/2018",
  "29/08/2018",
  "27/09/2018",
  "28/09/2018",
  "29/09/2018"
]

Now that we have all the days that we do not want to show, in the functions we only have to know whether or not this 'date' exists within this array with indexOf:

isInvalidDate: function(date) { 

      var valid = false; 
      let d =  date.format("DD/MM/YYYY");    
      if(newA.indexOf(d) !== -1){ //se comprueba la posicion
        valid = true;
      }
      return valid;
    },
isCustomDate: function(date) { 

      var daySettings = 'day_green';
      let d =  date.format("DD/MM/YYYY");
      if(newA.indexOf(d) !== -1){
        dayData = newA[d]
        daySettings = 'day_red';
      }
      return daySettings;

    },

You have the example here

EDIT:

Since you need to change color (the class) depending on an internal field in the JSON, the array has to change.

The issue is that the accept must also arrive at the function:

var newA = [];
for( j of jsonT){
  let start = moment(j["start"]);
  let end   = moment(j["end"]);

  for (let m = moment(start); m.diff(end, 'days') <= 0; m.add(1, 'days')) {
    newA[m.format('DD/MM/YYYY')] = j;
    }
}

So, what we are going to do is multiply the array for all the days that you do not want to show. Being the day the key of the array.

Then in the function you only need to check if the variable with typeof exists or not

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

    isInvalidDate: function(date) { 
      var valid = false ; // default css class
      let d =  date.format("DD/MM/YYYY");
      if(typeof newA[d] !== 'undefined'){
        valid =  true;
      }
      return valid;
    },
   isCustomDate: function(date) { 

      var daySettings = 'day_green';
      let d =  date.format("DD/MM/YYYY");
       if(typeof newA[d] !== 'undefined'){
       daySettings = 'day_red';
        if(newA[d].accept == 1){ //Aqui compruebas accep
           daySettings = 'day_orange';
        }

      }
      return daySettings;

    },
});

You have the example here