Update option dinamically when user changes month in bootstrap datepicker

问题

I'm using bootstrap-datepicker and I have attached a listner to changeMonth event.

If I use one of setters listed here (e.g. setStartDate, setDatesDisabled, setDaysOfWeekHighlighted etc.) inside my listner, the picker view does not updates (month is unchanged). Everything works fine, if I do not use any datepicker's setter inside my listner.

Here a live sample showing the issue. In this example I'm trying to update dinamically hightlighted dates when the user changes months.

function getHighlighted(month){
  var highlitedDays = [0, 1];
  if( month % 2 == 0 ){
    highlitedDays = [3, 4];
  }
  return highlitedDays;
}

$('#datepicker').datepicker({
  daysOfWeekHighlighted: getHighlighted(new Date().getMonth())
}).on('changeMonth', function(e){
  var month = e.date.getMonth();
  var highlightedDays = getHighlighted(month);
  // I use setDaysOfWeekHighlighted just as example
  $('#datepicker').datepicker('setDaysOfWeekHighlighted', highlightedDays);
  // Do something else
  //...
});

$('#datepicker2').datepicker({
  daysOfWeekHighlighted: getHighlighted(new Date().getMonth())
}).on('changeMonth', function(e){
  console.log("I've just changed month to " + e.date.getMonth());
});

<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.6.4/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.6.4/js/bootstrap-datepicker.js"></script>

<input type="text" class="form-control" id="datepicker">
<input type="text" class="form-control" id="datepicker2">

What am I missing?

I came across this issue when I aswered this question where I used setDatesDisabled inside changeMonth listner.

EDIT (after comments)

I've tried both using $(this) inside 'changeMonth' and assign my datepicker to a variable as shown here:

var dt = $('#datepicker').datepicker({
  daysOfWeekHighlighted: getHighlighted(new Date().getMonth())
})
dt.on('changeMonth', function(e){
  var month = e.date.getMonth();
  var highlightedDays = getHighlighted(month);
  // Neither using dt nor $(this) works
  dt.datepicker('setDaysOfWeekHighlighted', highlightedDays);
  // Do something else
  //...
});

but the problem is still there.

回答1:

@VincenzoC Please make sure you're using the latest version (1.7.1), this Fiddle demonstrates that it works https://jsfiddle.net/s35za9dr/

function getHighlighted(month){
  var highlitedDays = [0, 1];
  if( month % 2 == 0 ){
    highlitedDays = [3, 4];
  }
  return highlitedDays;
}

$('#datepicker').datepicker({
  daysOfWeekHighlighted: getHighlighted(new Date().getMonth()),
  updateViewDate: false
}).on('changeMonth', function(e){
  var month = e.date.getMonth();
  var highlightedDays = getHighlighted(month);
  // I use setDaysOfWeekHighlighted just as example
  $('#datepicker').datepicker('setDaysOfWeekHighlighted', highlightedDays);
  // Do something else
  //...
});

$('#datepicker2').datepicker({
  daysOfWeekHighlighted: getHighlighted(new Date().getMonth()),
  updateViewDate: false
}).on('changeMonth', function(e){
  console.log("I've just changed month to " + e.date.getMonth());
});

EDIT

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.

回答2:

Problem: Your method update to current date whenever you change the date.

Solution: Try following code.

Remove your current on change method.

Add document Ready for initialize to current date and other is default.

<!DOCTYPE html>
<html>
<head>

<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.6.4/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.6.4/js/bootstrap-datepicker.js"></script>
<input type="text" class="form-control" id="datepicker">
<input type="text" class="form-control" id="datepicker2">
<script>

$( document ).ready(function() {
var startDate = $('#datepicker').datepicker('setStartDate', new Date());
});

$('#datepicker').datepicker().on('change', function(e){
  // I use setStartDate just as example
  var startDate = $('#datepicker').datepicker('setDaysOfWeekHighlighted', ['2016-04-29',           '2016-04-30']);

  // Do something else
  //...
});

$('#datepicker2').datepicker().on('changeMonth', function(e){
  console.log("I've just changed month to " + e.date.getMonth());
});
</script>
</head>
<body>

</body>
</html>

来源：https://stackoverflow.com/questions/43188409/update-option-dinamically-when-user-changes-month-in-bootstrap-datepicker

标签

javascript

jquery

twitter-bootstrap

bootstrap-datepicker