4

Como se pueden especificar algunos dias del datepicker para deshabilitarlos? por ejemplo, los dias de navidad, los feriados o cualquier otro?

Tengo por ahora el código de esta manera:

<script>
    function nDates(date){  
          var nFechas = false;
          $.ajax({
                type: "POST",
                url: 'prueba.php',
                data: {date},
                async: false,
                success: function(data) {
                  if (data == 1)
                    nFechas = true;
                  else 
                    nFechas = false;
                },
                error: function() {
                    alert('Error occured');
                }
            });
          return nFechas;
        }


                $( function() {
                    $.datepicker.setDefaults($.datepicker.regional["es"]);
                $( "#datepicker" ).datepicker({
                    dateFormat: 'yy-mm-dd',
                    changeMonth:true,
                    changeYear:true,
                    yearRange: "2017:2018", 
                    firstDay: 1,
                    minDate: 0,

                    beforeShowDay: function (date) {
                        var datesLimits = 20; 
                        var day = date.getDay(); 
                        var dd = date.getDate();
                        var mm = date.getMonth()+1; 
                        var yyyy = date.getFullYear();
                        if(dd<10){
                            dd='0'+dd;
                        } 
                        if(mm<10){
                            mm='0'+mm;
                        }
                        var date = yyyy+'-'+mm+'-'+dd;
                        if (day == 6 || day == 0) { 
                        return [false, "somecssclass"] 
                         } else {
                           if (nDates(date)){
                                return [true, "someothercssclass"] 
                           } else {                                  
                                return [false, "somecssclass"]
                              }
                        }},




                    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'],
                    dayNamesMin: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
                    closeText: 'Cerrar',
                    prevText: 'Anterior',
                    nextText: 'Siguiente',
                    currentText: 'Hoy',
                });
            });

</script>

1 respuesta 1

3

tienes que declarar un array para almacenar todos los dias feriados alli. Asi lo logras: Lo edite para adaptarlo a lo que tu tienes:

<head>
    <title>Prueba</title>
</head>
<body>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
    <div>
        <label for="datepicker">Selecciona Fecha:</label>
        <input type="text" id="datepicker"/>
    </div>


    <script type="text/javascript">

        var disableddates = ["8-3-2017", "12-11-2016", "8-25-2017", "8-20-2017"];

        function DisableSpecificDates(date) {

            var m = date.getMonth();
            var d = date.getDate();
            var y = date.getFullYear();
            var currentdate = (m + 1) + '-' + d + '-' + y ;

            for (var i = 0; i < disableddates.length; i++) {
                if ($.inArray(currentdate, disableddates) != -1 ) {
                    return [false];
                } 
            }

            return disableddates;
        }

        $( function() {
            $.datepicker.setDefaults($.datepicker.regional["es"]);
            $( "#datepicker" ).datepicker({
                dateFormat: 'yy-mm-dd',
                changeMonth:true,
                changeYear:true,
                yearRange: "2006:2017", 
                firstDay: 1,
                minDate: new Date(006, 12, 1), /** AAAA,MM,DD Fecha inicio */
                maxDate: new Date(2020, 11, 31), /** AAAA,MM,DD Fecha Fin */

                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'],
                dayNamesMin: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
                beforeShowDay: DisableSpecificDates
            });
        });
    </script>
</body>
</html>

Este es solo un ejemplo, lo puedes adaptar a tus necesidades.

9
  • Hola Luis, tu solucion me funciona, pero tengo un problema al momento de querer adaptarlo en el datepicker que ya tengo...actualmente tengo una validacion para que los dias se deshabiliten si el maximo de citas ha llegado al maximo (porque es un sistema de citas medicas) y tambien deshabilito los fines de semana. Al probar tu codigo me funciona bien aparte, y eso lo agradezco, pero al ponerlo en lo que ya tengo (porque ya poseo un beforShowDay en el datepicker con una funcion) no se como agregar el DisableSpecificDates, y haciendo otro beforeShowDay, se me deshabilita el anterior que ya tenia Commented el 17 ago. 2017 a las 18:14
  • he editado la consulta para que veas mi datepicker como lo tengo Commented el 17 ago. 2017 a las 18:14
  • Hola @rodrigo2324 que devuelve tu .PHP? porque no te funciona? que falla? no deshabilita las fechas o que?
    – Alvarez
    Commented el 17 ago. 2017 a las 19:43
  • Bueno, al abrirse el datepicker que tengo, todo funciona bien, los dias que ya tienen los registros de citas al maximo se deshabilitan, pero al colocar lo de dias feriados, el datepicker pierde mi validacion de citas y pierde tambien la validacion de que se desactiven los fines de semana y se coloca la validacion que es de dias feriados, que en este caso seria la de tu respuesta que funciona muy bien (solo me pasa esto si creo un nuevo beforeShowDay luego del que ya tenia yo...si coloco el DisableSpecificDates dentro del beforeShowDay mio, no deshabilita los dias feriados que coloque..) Commented el 17 ago. 2017 a las 19:48
  • pienso que no debes tener 2 beforeShowDay, porque creo que se crea conflicto. existe forma de que crees una variable en donde se puedan almacenar todas las fechas que quieres que esten desactivadas? @rodrigo2324
    – Alvarez
    Commented el 17 ago. 2017 a las 20:00

Tu Respuesta

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

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