VincenzoC VincenzoC - 3 months ago 18
jQuery Question

Update option dinamically when user changes month in bootstrap datepicker

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

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.

Answer Source

@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());
});