검도 UI의 날짜 선택기 - 달 변경 이벤트

Question

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

below-, 내 모든 날짜 불구하고 반복하고 있고 날짜 선택기 달력의 데이터 값과 비교처럼 OPEN 이벤트를했다 . 일치하는 항목이 발견되면 해당 날짜를 표시하는 수업을 적용하고 있습니다.

datepicker OPEN 이벤트에는 아무런 문제가 없지만 월을 변경할 때마다 날짜가 표시되지 않습니다.

그래서 한달에 한 번씩 변경되는 이벤트가 필요하므로 새로운 월의 날짜를 표시하는 2 줄의 코드를 실행할 수 있습니다.

Answer 1

당신은 위젯의 month 템플릿을 사용할 수 있습니다. 거기서 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

Answer 2

DatePicker 소스 코드를 살펴본 후에는이를 수행 할 수있는 문서가 없으므로이를 수행 할 수 있습니다.

기본 캘린더 위젯에는 원하는 것을 수행하는 navigate 이벤트가 있습니다 (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을 가지고 ...하지만 DateView가 처음 열릴 때까지 일정이 존재하지 않습니다

나는 이런 식으로 일을 할 수 있었다. 하지만 그런 일이 생기면 탐색 이벤트에 연결할 수 있습니다. DateView가 내부적으로 먼저 호출 할 때 호출하는 "private"_calendar() 메서드를 호출하여 열려있는 이벤트없이 캘린더를 강제로 생성합니다. 이제 해당 탐색을 처리 할 수 ​​있습니다.

는

데모 : 위젯은 월보기로 설정되어있는 경우 그것은 매일 템플릿을 렌더링

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

: http://dojo.telerik.com/@Stephen/ekUwE