Deshabilitar dias feriados en un datepicker

Stack Overflow en español Asked by rodrigo2324 on December 18, 2020

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>

javascript jquery jquery ui jquery ui datepicker

One Answer

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.

Answered by Luisa on December 18, 2020

Add your own answers!

Ask a Question

Get help from others!