我想突出显示鼠标悬停在剑道日期选择器中的那一周,并在选择该周的任何日期时,我想获得一周的开始日期和结束日期。我不知道该怎么做。任何人都可以帮助我吗?
提前致谢
在我自己完成之后,我会在这里为未来的读者留下痕迹。
首先要做的是让选择看起来像是在选择一周而不是一天。为此,请使用一些 CSS :
.k-calendar table.k-content tr:hover td { background-color: #E3F2FD; }
.k-calendar table.k-content tr td.k-state-selected,
.k-calendar table.k-content tr td.k-state-selected ~ td { background-color: #2196F3; }
这将在鼠标悬停一行时整周亮起,但仍以不同的颜色显示选定的日期和该周的任何下一天。完成这项工作的诀窍是确保所选日期实际上始终是一周的第一天。
为此(并提取周开始和周结束日期),请使用更改事件:
onChange: function (e, callback) {
// Set the culture, since the first day of a week might be different
moment.locale(GetCulture());
// Get the selected date and calculate the start and end of week
var weekStart = moment(e.sender.value()).startOf('week').toDate();
var weekEnd = moment(weekStart).add(6, 'day').toDate();
// Always reset the date to the start of the week (the style needs it)
e.sender.value(weekStart);
// Do whatever else you want here
}
此解决方案需要使用moment.js,这是我的项目中已经使用的库。可能还有其他方法可以做到这一点,但这个方法很简单。
剩下的应该是次要细节,例如将“当前日期”页脚的文本更改为“当前周”,这通过open事件很容易做到:
widget.one("open", function (e) {
$('.k-footer a.k-nav-today', e.sender.dateView.popup.element).text("Current Week");
});