Question

我希望突出显示鼠标悬停在kendo datepicker上的一周，并选择该周的任何日期，我想获得周开始日期和结束日期。我不知道该怎么做。任何人都可以帮助我。

提前致谢

Answer 1

在完成这项工作之后，我会在这里为未来的读者留下痕迹。

要做的第一件事就是让选择看起来像是选择一周而不是一天。要实现这一点，请使用一些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; }

当鼠标悬停一行时，这将在整个星期亮起，但仍然以不同的颜色显示所选日期以及该周的任何后一天。使这项工作的诀窍是确保所选日期实际上始终是一周的第一天。

要执行此操作（并提取周开始日期和周结束日期），请使用change事件：

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

如何在鼠标悬停时突出显示kendo datepicker中的一周

1 个答案: