Twitter Bootstrap Question posted in

Update option dinamically when user changes month in bootstrap datepicker – Twitter bootstrap

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.

Tags:

2

Answers


  1. 0

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

    Solution: Try following code.

    1. Remove your current on change method.

    2. 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>
    Login or Signup to reply.
  2. 0

    @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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search