Question

Kendo UI datepicker - 月更改事件

我在这里搜索了这个＆amp;在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日历的数据值进行比较。在找到匹配时，我正在申请上课以标记该日期。

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

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

Answer 1

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

基础Calendar小部件有一个导航事件，可以执行您想要的操作（http://docs.telerik.com/kendo-ui/api/javascript/ui/calendar#events-navigate）。问题是获取对DatePicker使用的Calendar的引用。

我能够这样做：

$(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

Answer 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

Kendo UI datepicker - 月改变事件

2 个答案: