Hover bootstrap datepicker

Question

I'm trying to use the hover() function of JQuery to do some formatting to my DatePicker when entering the mouse in one of its rows but unfortunately my hover() is never call.

Here is how I initialize my datepicker:

//WEEK PICKER
moment.locale('fr', {
  week: { dow: 1 } // Monday is the first day of the week
});

//Initialize the datePicker(I have taken format as mm-dd-yyyy, you can     //have your owh)
$("#weeklyDatePicker").datetimepicker({
    format: 'MM-DD-YYYY'
});

//Get the value of Start and End of Week
$('#weeklyDatePicker').on('dp.change', function (e) {
    var value = $("#weeklyDatePicker").val();
    var firstDate = moment(value, "MM-DD-YYYY").weekday(0).format("MM-DD-YYYY");
    var lastDate =  moment(value, "MM-DD-YYYY").weekday(6).format("MM-DD-YYYY");
    $("#weeklyDatePicker").val(firstDate + " - " + lastDate);
});

Here is how I'm setting my hover() function:

$( ".bootstrap-datetimepicker-widget tr" ).hover(
  function() {
    console.log('in');
  }, function() {
    console.log('out');
  }
);

But no logs are being written. I'm sure to have the right selector because I got this in my CSS:

.bootstrap-datetimepicker-widget tr:hover {
    background-color: #808080;
}

And the color is updating when the mouse goes hover.

Any idea?

---

EDIT

Here is a Jfiddle that reproduce my code: https://jsfiddle.net/5kzjvL1u/

Answer 1

I believe Robert C is correct in his comment in that it's being loaded intor the DOM after the page has loaded and you are correct in your suggestion of placing the :hover within a click event for the input field. See this snippet for a working example.

$(document).ready(function() {
  moment.locale('fr', {
    week: {
      dow: 1
    } // Monday is the first day of the week
  });

  //Initialize the datePicker(I have taken format as mm-dd-yyyy, you can     //have your owh)
  $("#weeklyDatePicker").datetimepicker({
    format: 'MM-DD-YYYY'
  });

  $('#weeklyDatePicker').on('dp.change', function(e) {
    var value = $("#weeklyDatePicker").val();
    var startDate = moment(value, "MM-DD-YYYY").weekday(0).format("MM-DD-YYYY");
    var endDate = moment(value, "MM-DD-YYYY").weekday(6).format("MM-DD-YYYY");
    $("#weeklyDatePicker").val(startDate + " - " + endDate);
  });

  $("#weeklyDatePicker").click(function() {
    $(".bootstrap-datetimepicker-widget tr").hover(
      function() {
        console.log('in');
      },
      function() {
        console.log('out');
      }
    );
  });
});

.bootstrap-datetimepicker-widget tr:hover {
  background-color: #808080;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://cdn.jsdelivr.net/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>
</div>