estoy usando este datepicker en el proyecto en el que estoy trabajando actualmente, y me ha sorprendido gratamente por su versatilidad.
Aunque es muy fácil habilitar y deshabilitar fechas pasándole un array con dichas fechas, el problema me viene cuando quiero pasarle dichas fechas dinámicamente con ajax: aunque mi función va bien al cargar por primera vez el calendario, no funciona igual de bien al actualizar el calendario (al pasar al siguiente mes o año), no habilita las fechas.
Es una aplicación de reservas, luego hay dos calendarios, uno de fecha de inicio y otro de fecha final. Este es el código problemático:
Código :
// Inicializar los inputs y los calendarios function initialiseInputs(){ // Añadir el evento on change al calendario de fecha de inicio datePickerController.addEvent(document.getElementById("dateStart"), "change", setReservationDates); // Inicializar el rango mínimo del calendario de fecha final var sd = datePickerController.getDatePicker("dateStart"); // llamamos sd al datepicker de inicio var ed = datePickerController.getDatePicker("dateEnd"); // llamamos ed al datepicker final var dt = datePickerController.dateFormat(document.getElementById("dateStart").value, sd.format.charAt(0) == "m"); //dar formato a la fecha del calendario de inicio ed.setRangeLow(dt); // asignar esa fecha como rango mínimo del calendario final var this_year = sd.date.getFullYear(); // this_year es el año que muestra el calendario var this_month = sd.date.getMonth() + 1; // this_month es el mes que muestra el calendario setBookableDates(sd, this_year, this_month, ''); // Añadir el evento onupdate a ambos calendarios var dp; datePickerController.onupdate = function(dp){ // dp = the datePicker Object // dp.date = the datePickers Date Object var this_year = dp.date.getFullYear(); var this_month = dp.date.getMonth() + 1; setBookableDates(dp, this_year, this_month, ''); } // Set the low range of the second datePicker to be the date parsed from the first //var dt = datePickerController.dateFormat(document.getElementById("dateStart").value, sd.format.charAt(0) == "m"); //document.getElementById("dateStart").setRangeLow( dt ); } function setBookableDates(dp, year, month, day) { var objAJAX=createAJAXEngine(); // A new instance is created /* Define the function to be run when readystate changes */ var load_page = 'xml/bookable_dates.php'; var this_time = new Date(); load_page += '?year=' + year + '&month=' + month + '&day=' + day + '&seed=' + this_time.getTime(); objAJAX.onreadystatechange = function() { if (objAJAX.readyState == 4) { var bookable_dates = parse_dates_XML(objAJAX); // Enable dates alert('primera fecha habilitada del mes ' + month + ': ' + bookable_dates[0]); //funciona siempre dp.setEnabledDates(bookable_dates); //funciona solo cuando se muestra el calendario por primera vez, no onupdate } } objAJAX.open('GET', load_page, true); /* Request the xml */ objAJAX.send(null); /* Send the request*/ }
Espero me podais echar una mano. Gracias y un saludo