jquery - rango - Boostrap datepicker, deshabilita las fechas dinámicamente cada mes

datepicker bootstrap jquery

Question

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, ya que puede pasar el año en el calendario, puedo tener 300 días de inhabilitación de 365 en 2017 y 200 días de incapacidad de 365 en 2016.

Quiero optimizar, imagino que después de 5 años, podría tener 2500 días deshabilitados para cargar. Alguien sabe cómo hacerlo dinámicamente, quiero decir, cada vez que cambie el mes actual.

¿O alguna otra forma de hacer esto?

Answer 1

El uso de cualquiera de los métodos set * (por ejemplo, setDatesDisabled ) en los eventos changeMonth , changeYear , changeDecade o changeCentury desencadenará una actualización que hará que el selector vuelva al mes en que ocurre la fecha de visualización actual.

Para evitar esto, solo necesita iniciar el selector con la opción updateViewDate establecida en falso .

$(''#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);
});

Answer 2

Puede actualizar dinámicamente las fechas deshabilitadas utilizando setDatesDisabled y puede escuchar los cambios que agregan el controlador para los changeMonth , changeYear , changeDecade y changeCentury .

EDITAR: Como Dave Herman declaró aquí , había un error con la versión 1.6.4 corregida con 1.7.1 y tienes que agregar la opción updateViewDate: false .

Aquí mi intento (unsing getDisabledDates para simular las fechas de dynamicc disabled):

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">