Loop on currently displayed DatePicker's days

Question

I'm using the bootstrap datepicker with JQuery.

What I would like is to make some changes to the currently displayed days every time we show a different month. I manage to do it on the default month (the one displayed when opening the datepicker) but if I click on the 'next' or 'prev' button, it does not work anymore.

To better understand, here is a JSFiddle that reproduce the issue (what I want is not to change the background color but I made this to be simplier to work with): https://jsfiddle.net/k45xjquk/

We can see on my JSFiddle that the log got called every time a month is displayed but the background color do not change, any idea?

Here is the main content of the JSFiddle where we can see how I start the loop on the currently displayed days:

$(document).ready(function(){

    $("#weeklyDatePicker").datetimepicker({
        format: 'MM-DD-YYYY'
    });

    $("#weeklyDatePicker").click(function() {
      $(".next,.prev").click(function() {
        changeDaysBackground();
      });
      changeDaysBackground();
    });

    function changeDaysBackground() {
      console.log("changeBackground");
      var days = $(".datepicker-days td");
      days.each(function(i) {
        $(this).css("background-color", getRandomColor());
      });
    }

    function getRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

});

Answer 1

Have a look at the Events section of the docs. You can use:

• dp.show

  Fired when the widget is shown.

• dp.update

  Fired (in most cases) when the viewDate changes. E.g. Next and Previous buttons, selecting a year.

Here a live example:

$("#weeklyDatePicker").datetimepicker({
    format: 'MM-DD-YYYY',
    locale: 'fr'
}).on('dp.show dp.update', changeDaysBackground);

function changeDaysBackground() {
  console.log("changeBackground");
  var days = $(".datepicker-days td");
  days.each(function(i) {
    $(this).css("background-color", getRandomColor());
  });
}

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-6 form-group">
      <div class="input-group" id="DateDemo">
        <input type='text' id='weeklyDatePicker' placeholder="Select Week" />
      </div>
    </div>
 </div>

PS. Use locale option if you want to change locale to the datetimepicker.