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

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

我在这里搜索了这个&在Telerik论坛上也搜索了，但是没有解决这个问题的方法

在这里，我想标记几个月的日期，我是在公开活动上做的，如下所示-

$.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日历的数据值进行比较。在发现匹配项时，我正在申请类来标记该日期

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

---

因此，我想要一个事件，它将在月份更改时触发，这样我就可以执行这两行代码来标记新月份的日期。

似乎没有任何文档记录可以这样做，但在查看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");
    });
});

// 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)]
};

DatePicker有一个DateView，它有一个日历…但是日历直到DateView第一次打开时才存在。但一旦发生这种情况，您就可以附加到其导航事件。 我通过调用DateView在第一次打开时内部调用的“private”\u Calendar（）方法，强制日历在没有打开事件的情况下存在……现在您可以处理其导航

---

演示：

您可以使用小部件的

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#

或者不管你怎么想，这只是一个建议，因为你把行

dates=months[month]

改成了一个日期数组

---

我认为调用内部方法（

\u calendar（）

）根本不是一个好主意。我们应该避免这种做法。我同意，但这似乎是访问日历的唯一方法，而且剑道总是会使用一些方法来初始化可以使用的日历，这是非常安全的。