0

Lo que estoy intentando hacer es remarcar algunas fechas, sacadas de una base de datos, en un datepicker. Después de buscar mucho por internet parece algo normal, pero no lo consigo.. cualquier ayuda será bienvenida.

Mis codigos:

//función para mostrar el calendario (datepicker jquery ui)
function calendario() {

var fechas = [];

//recuperar el idobra seleccionado
var idobra = $("#combo_obra").val();

$.ajax({
    url: "php/consulta_clientes.php",
    type: "post",
    data: {"idobra":idobra, "opcion":"remarcar"},
    success: function(respuesta) {

        var arrayRespuesta = JSON.parse(respuesta);

        for(var i = 0; i<arrayRespuesta.length; i++) {

            fechas[new Date (arrayRespuesta[i]["fecha"])] = new Date (arrayRespuesta[i]["fecha"]);
        }
        return fechas;
    }
})
console.log(fechas);

$('#calendario').datepicker({
    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
    dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
    dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
    dateFormat: 'yy/mm/dd',
    prevText: '< Ant',
    nextText: 'Sig >',
    firstDay: 1,
    showButtonPanel: true,
    currentText: 'Hoy',

    beforeShowDay: function(date) {

        console.log(date);
        console.log(fechas);

        var date = $.datepicker.formatDate('yy/mm/dd', date);
            if($.inArray(date, fechas) !== -1) {
                return [true, 'verde'];
            } else {
                 return [true, ''];
            }
    }
})

};

He puesto tres console.log para ver que hay.

El primero después de la consulta $.ajax, donde se ve un array con las fechas que quiero remarcar en el calendario:

1

El segundo dentro de beforeShowDay, para ver el parametro date (en el console log original aparecen algunas lineas de fechas más):

2

Y el tercero también dentro de beforeShowDay para asegurar que el array fechas llega:

3

El calendario en si mismo lo visualizo perfectamente, traducido al castellano incluso, dentro de un div con id="calendario".

Creo que el problema está en el formato de las fechas o zonas horarias, porque al hacer "$.inArray(date, fechas) !== -1" todo me entra por el else (al hacer un console.log de $.inArray(date, fechas) todo es igual a -1)

En cualquier caso por más que le doy vueltas no consigo que funcione, alguna idea?? Cualquier ayuda será bienvenida, gracias de antemano.

--- EDITO

Un caso similar es el expuesto en esta página, que también lo he visto por stackoverflow, en este caso lo hacen con un array escrito en vez de venir de una base de datos. Y esto si me funciona; pero si pongo mi array fechas (que sale de $.ajax) en eventDates[date] obtengo el mismo resultado que con mi código anterior.

https://programacion.net/articulo/como_resaltar_fechas_especificas_en_jquery_ui_datepicker_1731

--- EDITO (comentario azeós - PD. gracias por tus ideas)

Modifico el array fechas para que sea string

$.ajax({
    url: "php/consulta_clientes.php",
    type: "post",
    data: {"idobra":idobra, "opcion":"remarcar"},
    success: function(respuesta) {
        //json a array asociativo
        var arrayRespuesta = JSON.parse(respuesta);

        for(var i = 0; i<arrayRespuesta.length; i++) {

            fechas[i] = arrayRespuesta[i]["fecha"];
        }
        return fechas;
    }
})

console.log(fechas);

4

He puesto guiones en el formato para que sea igual al resultado del array fechas var date = $.datepicker.formatDate('yy-mm-dd', date);

beforeShowDay: function(date) {

        var date = $.datepicker.formatDate('yy-mm-dd', date);

        //console.log(date);
        //console.log(fechas[0]); //undefined
        console.log(fechas);

            if($.inArray(date, fechas) !== -1) {
                return [true, 'verde'];

            } else {
                 return [true, ''];
            }
    }

Console.logs hechos dentro de beforeShowDay:

Console.log date (faltan lineas de fechas en la imagen):

5

Console.log fechas:

6

Y como he comentado en comentarios console.log(fechas[0]) es undefined, porque? no deberia ser 2017-12-04??

11
  • $.inArray(date, eventDates) no debería ser $.inArray(date, fechas)? No tenés declarado el array eventDates en ningún lado.
    – azeós
    Commented el 20 dic. 2017 a las 17:58
  • si, es fechas. ahora mismo lo cambio en la pregunta. ese no es el problema. seguramente está pq he estado provando con el código del enlace que he adjuntado
    – itaca9
    Commented el 20 dic. 2017 a las 18:02
  • El problema, como sospechas, está en el formato de las fechas. Hacé un console.log de una fecha X (fechas[0]) y de date. Si no tienen el mismo formato, no van a coincidir nunca. Si el array fechas sólo lo estás usando para esto, te diría que directamente cuando lo armas en la consulta AJAX ya le pongas el formato que vas a usar en el datepicker (yy/mm/dd).
    – azeós
    Commented el 20 dic. 2017 a las 18:07
  • Te recomiendo que uses una librería para manipular las fechas: Moment.js
    – azeós
    Commented el 20 dic. 2017 a las 18:08
  • 1
    El console.log(date) que tenés está ANTES de asignarle un nuevo valor var date = $.datepicker.formatDate('yy/mm/dd', date);. Ponelo después de esa línea para ver bien que genera. Y si, si no son iguales, es un problema. Por eso lo más fácil es que no guardes dentro del array un objeto Date sino directamente un string con la fecha.
    – azeós
    Commented el 20 dic. 2017 a las 18:26

0

Tu Respuesta

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