Boostrap datepicker, disabled dates dynamically ea

问题:

I can disable dates with:

$('#datepicker').datepicker({
    todayHighlight: true,
    datesDisabled: ['03/06/2017', '03/21/2017','04/14/2017']
});

but with my use case, since you can go over the year by the calendar, I can have 300 disable days out of 365 in 2017 and 200 disabled days out of 365 in 2016.

I want to optimize, imagine after 5 years, he could have 2500 disabled days to load. Someone know how to do it dynamically, I mean, each time a change the current month.

Or another way to do this?

回答1:

Using any of the set* methods (e.g. setDatesDisabled) in the changeMonth, changeYear, changeDecade or changeCentury events will trigger an update which will cause the picker to revert back to the month in which the current view date occurs.

To prevent this you simply need to initiate the picker with the updateViewDate option set to 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);
});

回答2:

You can dynamically update disabled dates using setDatesDisabled and you can listen to view changes adding handler for changeMonth, changeYear, changeDecade and changeCentury events.

EDIT: As Dave Herman stated here, there was a bug with version 1.6.4 fixed with 1.7.1 and you have to add updateViewDate: false option.

Here my attempt (unsing getDisabledDates function to simulate dynamc disabled dates):

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