剑道UI日期选择器 - 个月的变化情况

剑道UI日期选择器 - 个月的变化情况剑道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事件上工作绝对正常，但每当我改变月份，它都不会标记日期。

所以我想要一个会触发月份变化的事件，以便我可以执行2行代码来标记新月份的日期。

来源

2017-04-07 Subhash Walunj

您可以使用month模板widget的：

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

来源

2017-04-07 17:43:20 DontVoteMeDown

感谢@DontVoteMeDown，这在我的情况下工作。 –

似乎没有任何记录可以做到这一点，但在查看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

来源

2017-04-07 15:43:39

我不认为这是一个好主意，在所有调用内部方法（'_calendar（）'）。我们应该避免这种做法。 – DontVoteMeDown

我同意，但它似乎是访问日历的唯一方式，并且总是会有一些kendo用来初始化可以使用的日历的方法，这非常安全。 –

剑道UI日期选择器 - 个月的变化情况

回答

相关问题