剣道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-、私はすべての私の日付をループしていますし、DatePickerのカレンダーのデータ値と比較するようにOPENイベントでそれをやりました。一致するものが見つかったら、その日付をマークするクラスを適用しています。

datepicker OPENイベントでは正常に動作していますが、月が変わるたびに日付が表示されません。

私は月の変更をトリガーするイベントが必要なので、2行のコードを実行して新しい月の日付をマークすることができます。

Answer 1

あなたは、ウィジェットのmonthテンプレートを使用することができます。そこで、spanの日番号を希望のクラスにラップすることができます。

、テンプレートのようなものが考えられます。

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

それとも、とにかくあなたがそれをしたい - ちょうど提案したこと - あなたが行を変更するため、このようなmonths対象となる

# 
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]には、日付の配列を与えるものがあります。

Demo

Answer 2

これについては文書化されていないようですが、DatePickerのソースコードを見て、それを達成できます。

基本となる予定表ウィジェットには、希望する操作を行うnavigateイベントがあります（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"); 
    }); 
}); 

日付ピッカーは、カレンダーを持っているDateViewを持っている...しかしDateViewが最初に開かれるまでカレンダーが存在しません。しかしそれが起こると、そのnavigateイベントにアタッチできます。 DateViewが最初に開いたときに呼び出す "private" _calendar（）メソッドを呼び出すことで、カレンダーをオープンイベントなしで強制的に存在させることができます。

は

デモ：ウィジェットは月表示に設定されている場合、それは毎日のテンプレートをレンダリングし

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

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