悬停 bootstrap 日期选择器

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

我相信 Robert C 的评论是正确的，因为它是在页面加载后加载到 DOM 中的，而您关于将 :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>

悬停 bootstrap 日期选择器

Hover bootstrap datepicker

javascript

jquery

twitter-bootstrap

jquery-hover

bootstrap-datetimepicker