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

Question

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

因此，我循环遍历所有日期并将其与日期选择器日历的数据值进行比较。在找到匹配项时，我正在应用 class 来标记该日期。

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

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

Answer 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，它有一个日历...但是在 DateView 第一次打开之前，日历不存在。但是一旦发生这种情况，您就可以附加到它的导航事件。我通过调用 DateView 在首次打开时内部调用的 "private" _calendar() 方法强制日历在没有打开事件的情况下存在...现在您可以处理它的导航。

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

Answer 2

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

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

如果小部件设置为月视图，它会为每一天呈现一个模板。在那里你可以用 span 和所需的 class.

包裹天数

模板可以是这样的：

# 
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

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

Kendo UI datepicker - month change event

kendo-ui

kendo-datepicker