引导程序 3 日期选取器 v4:移动鼠标时自动选择自定义周

Bootstrap 3 Datepicker v4: Select custom week automatically while moving the mouse

本文关键字：选择 自定义 鼠标 移动 日期 选取 v4 引导程序      更新时间：2023-09-26

日期选取器只能选择鼠标指向的行。喜欢这个：

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

这是工作代码：https://jsfiddle.net/owos/1mzhwykv/

但是，我想突出显示从星期四到星期三的一周。该周分为两行，这使得tr:hover不起作用。

这是一种使用 JQuery 设置正确单元格样式的方法

var weekStart = 4,
  selectColor = "#ccc";
weekSelect = function() {
  $(".day").hover(function() {
    var index = $(this).index();
    if (index < weekStart) {
      prevSlice = index;
      nextSlice = weekStart - index - 1;
      prevWeek = 7;
      nextWeek = 0;
    } else {
      prevSlice = index - weekStart;
      nextSlice = 6 - index;
      prevWeek = weekStart;
      nextWeek = weekStart;
    }
    $(this).parent().next().children().slice(0, nextWeek).css('background-color', selectColor);
    $(this).parent().prev().children().slice(weekStart, prevWeek).css('background-color', selectColor);
    $(this).prevAll().slice(0, prevSlice).css('background-color', selectColor);
    $(this).css('background-color', selectColor);
    $(this).nextAll().slice(0, nextSlice).css('background-color', selectColor);
  }, function() {
    $(this).parent().prev().children().slice(0, prevWeek).css('background-color', '');
    $(this).prevAll().slice(0, prevSlice).css('background-color', '');
    $(this).css('background-color', '');
    $(this).nextAll().slice(0, nextSlice).css('background-color', '');
    $(this).parent().next().children().slice(0, nextWeek).css('background-color', '');
  });
};

https://jsfiddle.net/link2twenty/1mzhwykv/1/

相关文章：