0

Tengo un Datepicker que estoy utilizando dentro de un formulario hecho con Bootstrap 4, ahora necesito deshabilitar las fechas que son feriado dentro del año pero no logro hacerlo.

El código del llamado del Datepicker dentro del formulario:

<label class="col-form-label">Fecha Hasta:</label>
<div class="form-group form-bordered col-md-2 m-b-10">
    <input type="text" name="fechaHasta" class="form-control" id="fechaFin" placeholder="Select Date" value="<%=request.getAttribute("fechaHasta")%>" onclick="ShowCalendarFin()" />
</div>

El código del Datepicker:

function ShowCalendarFin(){

    $("#fechaFin").datepicker({
            changeMonth : true, 
            changeYear : true, 
            autoclose: true, 
            firstDay : 1, 
            minDate : new Date(2005, 0, 1),
            yearRange : '2005:'
                    + String((new Date()).getFullYear() + 1),
            dateFormat : "dd/mm/yy", 
            language: "es",
            dayNames : [ "Domingo", "Lunes", "Martes", "Miércoles",
                    "Jueves", "Viernes", "Sábado" ],
            dayNamesMin : [ "Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa" ],
            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" ],
            datesDisabled: [
                            "01/01/2019","19/04/2019","20/04/2019","01/05/2019",
                            "21/05/2019","29/06/2019","16/07/2019","15/08/2019",
                            "18/09/2019","19/09/2019","20/09/2019","12/10/2019",
                            "31/10/2019","01/11/2019","08/12/2019","25/12/2019"
                            ] 

        });
}

La funcionalidad datesDisabled no me toma las fechas a deshabilitar, según vi en https://eonasdan.github.io/bootstrap-datetimepicker/#enableddisabled-dates la forma de utilizar ésta funcionalidad es:

  disabledDates: [
                        moment("12/25/2013"),
                        new Date(2013, 11 - 1, 21),
                        "11/22/2013 00:53"
                    ]

Probé utilizando new Date, moment() y la fecha entre comillas, pero no logro que me tome la fecha a deshabilitar, alguna idea de que puedo estar haciendo mal o que me falta?

De antemano, gracias por su tiempo

1 respuesta 1

0

Creo que el problema es que tienes una confusión con la librería que estas usando. Por tu código asumo que estas usando bootstrap-datepicker para tener un datepicker, pero la documentación que estas viendo es de una librería distinta para tener un datetimepicker.

Otro problema es que el formato de fecha se define con la propiedad “format”, no con “dateFormat”, por lo que las fechas que quieres deshabilitar no coinciden en formato.

A continuación, te dejo un ejemplo que utiliza bootstrap-datepicker donde se están deshabilitando 2 fechas:

$(function () {
    $("#fecha").datepicker({
        changeMonth : true,
        changeYear : true,
        autoclose: true,
        firstDay : 1,
        minDate : new Date(2005, 0, 1),
        yearRange : '2005:' + String((new Date()).getFullYear() + 1),
        format: "dd/mm/yyyy",
        language: "es",
        datesDisabled: [
            "20/01/2019", // 20 de enero de 2019
            "20/02/2019", // 20 de febrero de 2019
        ],
    });
});
html {
  height: 100%;
}

body {
  height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.es.min.js"></script>


<div class="d-flex align-items-center h-100">
  <div class="card col-6 offset-3">
    <div class="card-body">
      <label for="fecha">Fecha</label>
      <input class="form-control" id="fecha" type="text" />
    </div>
  </div>
</div>

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.