Hover bootstrap datepicker

Question

J'essaie d'utiliser la fonction hover() de JQuery pour faire du formatage sur mon DatePicker lorsque j'entre la souris dans l'une de ses lignes mais malheureusement mon hover() n'est jamais appelé.

Voici comment j'initialiser mon 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); 
}); 

Voici comment je mettre ma fonction hover():

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

Mais pas de journaux sont en cours d'écriture. Je suis sûr d'avoir le sélecteur à droite parce que je suis arrivé dans mon CSS:

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

Et la couleur est mise à jour lorsque la souris passe en vol stationnaire.

Une idée?

---

EDIT

Voici un Jfiddle qui reproduisent mon code: https://jsfiddle.net/5kzjvL1u/

Answer 1

Je crois que Robert C est correct dans son commentaire en ce qu'il est en cours de chargement intor les DOM après la page chargée et vous avez raison dans votre suggestion de placer le :hover dans un événement de clic pour le champ de saisie. Voir cet extrait pour un exemple de travail.

$(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>