Puedo deshabilitar las fechas con:
$('#datepicker').datepicker({ todayHighlight: true, datesDisabled: ['03/06/2017', '03/21/2017','04/14/2017'] });pero con mi caso de uso, dado que puede pasar el año por el calendario, puedo tener 300 días deshabilitados de 365 en 2017 y 200 días deshabilitados de 365 en 2016.
Quiero optimizar, imagine después de 5 años, podría tener 2500 días deshabilitados para cargar. Alguien sabe cómo hacerlo de forma dinámica, es decir, cada vez que cambia el mes actual.
¿U otra forma de hacer esto?
El uso de cualquiera de los métodos set* (por ejemplo , setDatesDisabled ) en los eventos changeMonth , changeYear , changeDecade o changeCentury activará una actualización que hará que el selector vuelva al mes en el que se produce la fecha de visualización actual.
Para evitar esto, simplemente debe iniciar el selector con la opción updateViewDate establecida en false .
$('#datepicker').datepicker({ todayHighlight: true, updateViewDate: false, //datesDisabled: ['03/06/2017', '03/21/2017','04/14/2017'] }).on('changeMonth', function(e){ var month = e.date.getMonth(); var disabled = getDisabledDates(month); $('#datepicker').datepicker('setDatesDisabled', disabled); });Puede actualizar dinámicamente las fechas deshabilitadas usando setDatesDisabled y puede escuchar los cambios agregando un controlador para changeMonth , changeYear , changeDecade y changeCentury .
EDITAR: Como dijo Dave Herman aquí , hubo un error con la versión 1.6.4 corregido con 1.7.1 y debe agregar la opción updateViewDate: false .
Aquí mi intento (deshabilitando la función getDisabledDates para simular fechas deshabilitadas dinámicamente):
function getDisabledDates(month){ if( month<0 || month>12){ return []; } var disabled = [ ['01/01/2017', '01/02/2017', '01/03/2017'], ['02/04/2017', '02/05/2017', '02/06/2017'], ['03/08/2017', '03/09/2017', '03/10/2017'], ['04/05/2017', '04/06/2017', '04/07/2017'], ['05/15/2017', '05/16/2017', '05/17/2017'], ['06/11/2017', '06/12/2017', '06/13/2017'], ['07/15/2017', '07/16/2017', '07/17/2017'], ['08/07/2017', '08/08/2017', '08/09/2017'], ['09/05/2017', '09/06/2017', '09/07/2017'], ['10/11/2017', '10/12/2017', '10/13/2017'], ['11/06/2017', '11/07/2017', '11/08/2017'], ['12/13/2017', '12/14/2017', '12/15/2017'], ]; return disabled[month]; } $('#datepicker').datepicker({ todayHighlight: true, updateViewDate: false, //datesDisabled: ['03/06/2017', '03/21/2017','04/14/2017'] }).on('changeMonth', function(e){ var month = e.date.getMonth(); var disabled = getDisabledDates(month); $('#datepicker').datepicker('setDatesDisabled', disabled); }); <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script> <input type="text" class="form-control" id="datepicker">