懸停引導日期選擇器

Question

我想使用JQuery的hover()函數在我的DatePicker上執行一些格式化操作，當在其中一行中輸入鼠標時，但不幸的是我的hover()永遠不會調用。

這是我如何初始化我的日期選擇器：

//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); 
}); 

下面是我如何設置我的hover()功能：

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

但是，沒有日誌被寫入。我肯定有正確的選擇器，因爲我在CSS中得到了這個：

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

當鼠標懸停時顏色正在更新。

有什麼想法？

---

編輯

這裏是一個Jfiddle是重現我的代碼：https://jsfiddle.net/5kzjvL1u/

Answer 1

我相信，它的加載intor DOM中的頁面加載後羅伯特C是在他的評論中正確並且您建議將:hover置於輸入字段的單擊事件中，這是正確的。看到這個片段的工作示例。

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