2

Tengo un daterangepicker de bootstrap en el cual me gustaría hacer una serie de condiciones para que según las fechas que hay en la base de datos se bloqueen y cambien de color. Mi problema es que no sé muy bien cómo decirle al DateRangePicker que me coja las fechas del array que recibo del php sin que desaparezca de la web y quede un recuadro blanco.

EDITO: mi json que recibo en la vista, no lo interpreta correctamente el datepicker

Mi daterangepicker es este:

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

La variable $data que recibo de php tiene el siguiente json ( ya lo transforme en el controlador)

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

¿Cómo puedo utilizar este json para tener todas las fechas que vengan de bd como que están ocupadas, y marcarlas con otro color en el DateRangePicker? Estaba pensando en quitarle datos al array en php y pasarle solo la fecha, pero quiero conservar el area_id para hacer unas condiciones y que ponga distintos colores.

Gracias de antemano.

1 respuesta 1

2

Para date range picker tienes dos funciones:

  • isInvalidDate. esta funcion se ejecuta antes de crear el calendario y marcara la celda del dia como valida o invalida dependiendo de su retorno: ejemplo:

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

    Si devuelves true: invalida, false: valida. (valida o invalida, si es seleccionable)

  • isCustomDate. esta función se ejecuta antes de crear el calendario y le dará clases personalizadas a las celdas, siendo cada celda individual por el día. Ejemplo:

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

    Entonces, las celdas que queramos tendran la clase warning


JSON

Para no hacer un bucle cada vez que se llama a una de estas funciones, lo mejor es construir el JSON una vez lo hemos recibido.

Como lo que nos importa es el campo start, este lo ponemos como key de cada valor:

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

Donde newA un nuevo json construido.

Para verlo mas grafico:

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

A partir de aquí, si utilizamos tu código y en base a lo que ya tienes:

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

Algunas aclaraciones

  • He quitado algo de código para limpiar la respuesta, y fuera entendible.
  • Para que te funcione la clase css en las fechas invalidas (mas que nada el background-color), has de hacerlo !important

Y luego, aunque creo que no tiene que ver con la respuesta, esta bien que sepas que las fechas, DateRange picker, utiliza moment.js, por eso, para sacar el formato de la fecha, he utilizado las propias funciones del momentjs


Tienes el ejemplo aqui

14
  • En cuanto tenga tiempo, lo pruebo, he simplificado el array porque me parecio mejor no llevar datos que no necesito. Edito. Muchisimas gracias por tu respuesta, no pensé que fuera tan complejo. Saludos.
    – Peisou
    el 22 ago. 2018 a las 8:16
  • disculpa las molestias, voy a editar el post para que veas los cambios que hice, he comprobado la pagina que me compartiste y veo que funciona correctamente el metodo pero no esta cojiendo las fechas como deberia, de hecho marca en rojo los dias que trae digamos en la cabecera del json, y en mi pagina, el datepicker si que aparece pero debe ser que no esta entendiendo el json que le paso. Muchas gracias por tu ayuda
    – Peisou
    el 22 ago. 2018 a las 11:23
  • Claro, me imaginado que el orden del json coincidiria con el campo start del json. SI puedes pasa toda la estructura del json y miramos
    – Txmx
    el 22 ago. 2018 a las 11:29
  • Editado, agradezco tu ayuda cuando puedas, me parece muy interesante esto de tratar los datos, siempre me ha sido bastante confuso.
    – Peisou
    el 22 ago. 2018 a las 11:31
  • le echo un ojo!
    – Txmx
    el 22 ago. 2018 a las 11:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.