Problemas con un DatePicker al deshabilitar fechas

[[Gabo]]

Buenas tardes a todos!!
Quería pediros ayuda con un problema con el siguiente código:

    <script>
        // Función para obtener las fechas entre dos fechas dadas
        function obtenerFechasEntre(fechaInicio, fechaTermino) {
            var fechas = [];
            var fechaActual = new Date(fechaInicio);
            var fechaTermino = new Date(fechaTermino);
            while (fechaActual <= fechaTermino) {
                fechaActual.setDate(fechaActual.getDate() + 1);
                fechas.push(fechaActual.toISOString().split('T')[0]);
            }
            return fechas;
        }        
          
        $(function() {
            let fechas = <?php echo $jsonArray; ?>;
            // Array para almacenar las fechas entre los rangos
            var unavailableDates = [];
            // Iterar sobre el array de fechas y obtener las fechas entre cada par
            for (var i = 0; i < fechas.length; i++) {
                var rango = fechas[i];
                var fechaInicio = rango[0];
                var fechaTermino = rango[1];
                var fechasEntreRango = obtenerFechasEntre(fechaInicio, fechaTermino);
                unavailableDates = unavailableDates.concat(fechasEntreRango);
            }

            $( "#datepicker1" ).datepicker({
            // defaultDate: "+1w",
                minDate: 0,
                changeMonth: true,
                beforeShowDay: function(date) {
                    var stringDate = $.datepicker.formatDate('yy-mm-dd', date);
                    return [unavailableDates.indexOf(stringDate) === -1];
                },
                onClose: function( selectedDate ) {
                    $( "#datepicker2" ).datepicker( "option", "minDate", selectedDate );
                },
                onSelect: function(){
                    $( "#datepicker2" ).datepicker( "option", "disabled", false );
                }
            });
            // Evito que el usuario use el teclado en datepicker1
            $("#datepicker1").keydown(function(e) {
                e.preventDefault();
            });
    
            $( "#datepicker2" ).datepicker({
            //  defaultDate: "+1w",
                changeMonth: true,
                beforeShowDay: function(date) {
                    var stringDate = $.datepicker.formatDate('yy-mm-dd', date);
                    return [unavailableDates.indexOf(stringDate) === -1];
                },
                onClose: function( selectedDate ) {
                    $( "#datepicker1" ).datepicker( "option", "maxDate", selectedDate );
                }
            });
            // Evito que el usuario use el teclado en datepicker2
            $("#datepicker2").keydown(function(e) {
                e.preventDefault();
            });
        });
    </script>

La idea básica es que el array unavailableDates tiene varias fechas almacenadas y deseo deshabilitar esas fechas en 2 DatePicker, llamados datepicker1 y datepicker2. Para ello, utilizo beforeShowDay.

Sin embargo, sólo me deshabilita las fechas en el primer DatePicker.

Muchísimas gracias de antemano por cualquier ayuda que podáis darme.

Un saludo.

[dec]

Hola a todos,

Sino me equivoco, el código que se utiliza para lo que necesitas, es el que está situado en el evento "beforeShowDay" de los "data pickers". Efectivamente, en dicho evento, y, en ambos "data pickers", vemos las mismas líneas de código:

var stringDate = $.datepicker.formatDate('yy-mm-dd', date);
return [unavailableDates.indexOf(stringDate) === -1];

Eso es lo que "debería funcionar", y, de hecho, parece funcionar en el primer "data picker", pero, no en el segundo. Entonces, lo único que se me ocurre es que "$.datepicker" se esté refiriendo al primer "data picker", y, no al segundo.

No sé si en lugar de "$.datapicker" podrías probar con "$("#datepicker1")" y "$("#datepicker2")", en su lugar. Acaso, dentro del evento "beforeShowDay", puedas usar algo como "$(this)" para referirte al "data picker" en cuestión.

Pero es lo único que veo que puede estar pasando... lo que no significa que esté en lo cierto: que "$.datepicker" se refiera al primer "data picker", y, por eso ese "data picker" "funciona", y, no el segundo, incluso cuando el código del evento "es el mismo".

P.S. El primer "data picker" tiene una propiedad "minDate: 0", mientras que el segundo no la tiene... no sé si esto podría tener también algo que decir...