时间戳

首页 > 解决方案 > 如何在播出日期选择器日历中突出显示当前周

jquery - 如何在播出日期选择器日历中突出显示当前周

问题描述

http://t1m0n.name/air-datepicker/docs/

我正在使用广播日期选择器日历。如何在日历中突出显示当前的一周。查看我的小提琴位置。

http://jsfiddle.net/oua394nt/

<input type="text"
    data-range="true"
    data-multiple-dates-separator=" - "
    data-language="en" id="my-element"
    class="datepicker-here"/>

标签： jquerydatepicker

解决方案

由于 AFAICS Air Datepicker不会将周数添加到单元格中data-，因此您可以使用脚本来获取周数（从此 SO 答案编辑）：

jsFiddle 演示

  • 获取并存储当前周数。
  • 使用Air DatepickeronRenderCell()方法并向日期的周数等于当前周数的单元格添加一个类：

CSS：

.-current-week- {
  background: red;
}

JS：

function getWeek(d) {
  // https://stackoverflow.com/a/6117889/383904
  d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
  d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7));
  var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
  var weekNo = Math.ceil(( ( (d - yearStart) / 86400000) + 1)/7);
  return {year:d.getUTCFullYear(), number: weekNo};
}

var currentWeekNumber = getWeek(new Date()).number;

$('#my-element').datepicker({
  onRenderCell: function(date, cellType) {
    if (cellType === 'day' && getWeek(date).number === currentWeekNumber) {
      return {
        classes: '-current-week-',
      }
    }
  }
});

推荐阅读