Kendo UI 日期选择器 - 月份更改事件答案

【问题标题】：Kendo UI datepicker - month change eventKendo UI 日期选择器 - 月份更改事件
【发布时间】：2017-09-03 00:16:28
【问题描述】：

Kendo UI 日期选择器 - 月份更改事件

我在这里和 Telerik 论坛上也搜索过，但没有解决方案。

在这里，我想标记一个月中的几个日期，我在下面的 OPEN 事件中做到了-

$.each(dates, function (index, date) {
        var reformattedDate = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate();
        $('#datepickerId_dateview a.k-link[data-value="' + reformattedDate + '"]').parent().addClass("date-marking-class");
    });

所以，我正在遍历所有日期并将其与日期选择器日历的数据值进行比较。找到匹配后，我正在申请课程以标记该日期。

它在 datepicker OPEN 事件上工作得非常好，但是每当我更改月份时，它根本不会标记日期。

所以我想要一个在月份变化时触发的事件，这样我就可以执行那两行代码来标记新月份的日期。

【问题讨论】：

标签： kendo-ui kendo-datepicker

【解决方案1】：

似乎没有任何记录可以做到这一点，但是在查看 DatePicker 源代码之后，您可以完成它。

底层的日历小部件有一个导航事件，可以做你想做的事情（http://docs.telerik.com/kendo-ui/api/javascript/ui/calendar#events-navigate）。问题是获取对 DatePicker 使用的日历的引用。

我可以这样做：

$(document).ready(function() {
    // create DatePicker from input HTML element
    var datePicker = $("#datepicker").kendoDatePicker().getKendoDatePicker();
    var dateView = datePicker.dateView;
    // Force calendar to initialize so we can bind to its events...otherwise, it does not exist until it is opened for the first time.
    dateView._calendar();
    var calendar = dateView.calendar;
    calendar.bind("navigate", function () {
        console.log("Do your thing here");
    });
});

DatePicker 有一个 DateView，它有一个 Calendar...但是在 DateView 第一次打开之前，Calendar 不存在。但是一旦发生这种情况，您可以附加到它的导航事件。我通过调用 DateView 在首次打开时内部调用的“私有”_calendar() 方法来强制日历在没有打开事件的情况下存在……现在您可以处理它的导航。

演示：http://dojo.telerik.com/@Stephen/ekUwE

【讨论】：

我认为调用内部方法(_calendar()) 根本不是一个好主意。我们应该避免这种做法。
我同意，但它似乎是访问日历的唯一方法，而且剑道总会使用某种方法来初始化可用的日历，这非常安全。

【解决方案2】：

您可以使用小部件的month 模板：

$("#date").kendoDatePicker({
    month: {
        content: $("#date-template").html()
    }
});

如果小部件设置为月视图，它会为每一天呈现一个模板。在那里，您可以使用 span 将日期编号与所需的类一起包装。

模板可能是这样的：

# 
var month = data.date.getMonth() + 1;
    dates = months[month],
    found = false,
    result = data.value;

if (dates && dates.length > 0) {
  for (var i = 0, len = dates.length; i < len; i++) {
    var date = dates[i],
            dateSplit = data.dateString.split("/");

    if (date.getDate() == dateSplit[2] && 
        date.getMonth() == dateSplit[1] && 
        date.getFullYear() == dateSplit[0])
    {
      result = "<span class='date-marking-class'>" + data.value + "</span>";
      break;
    }
  }
}
#
#=result#

成为months 这样的对象：

// All months are contains an array with date objects(in this case, days 10 and 20 for each one)
var months = {
  "1": [new Date(2017, 0, 10), new Date(2017, 0, 20)],
  "2": [new Date(2017, 1, 10), new Date(2017, 1, 20)],
  "3": [new Date(2017, 2, 10), new Date(2017, 2, 20)],
  "4": [new Date(2017, 3, 10), new Date(2017, 3, 20)],
  "5": [new Date(2017, 4, 10), new Date(2017, 4, 20)],
  "6": [new Date(2017, 5, 10), new Date(2017, 5, 20)],
  "7": [new Date(2017, 6, 10), new Date(2017, 6, 20)],
  "8": [new Date(2017, 7, 10), new Date(2017, 7, 20)],
  "9": [new Date(2017, 8, 10), new Date(2017, 8, 20)],
  "10": [new Date(2017, 9, 10), new Date(2017, 9, 20)],
  "11": [new Date(2017, 10, 10), new Date(2017, 10, 20)],
  "12": [new Date(2017, 11, 10), new Date(2017, 11, 20)]
};

或者无论如何你想要它 - 这只是一个建议 - 因为你将 dates = months[month] 行更改为给你一个日期数组的东西。

Demo

【讨论】：