本節(jié)為你介紹的是 Kendo.ui.Calendar，分為上下兩節(jié)，本節(jié)為大家介紹的是Calendar日歷組件的方法和事件。

Methods

current

獲取當前選中的日期

Returns

Date 日歷中顯示的當前聚焦的日期

示例

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar();

var calendar = $("#calendar").data("kendoCalendar");

var current = calendar.current(); //will be today, because value is `null`
</script>

destroy

準備從DOM中安全刪除日歷，拆分所有的事件處理器并刪除jQuery.data屬性以避免內存泄露。kendo的任何子控件都可以調用destroy方法。

重要：這個方法不會刪除DOM中的Calendar元素。

示例

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar();

var calendar = $("#calendar").data("kendoCalendar");

calendar.destroy();
</script>

max

獲取并設置日歷的最大值。

Returns

Date 日歷的最大值

示例 - 獲取日歷的最大值

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar();

var calendar = $("#calendar").data("kendoCalendar");

var max = calendar.max();
</script>

示例 - 設置日歷的最大值

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar();

var calendar = $("#calendar").data("kendoCalendar");

calendar.max(new Date(2100, 0, 1));
</script>

min

獲取或設置日歷的最小值

Returns

Date 日歷的最小值

示例-獲取日歷的最小值

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar();

var calendar = $("#calendar").data("kendoCalendar");

var min = calendar.min();
</script>

示例-設置日歷的最小值

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar();

var calendar = $("#calendar").data("kendoCalendar");

calendar.min(new Date(1900, 0, 1));
</script>

navigate

導航視圖

示例

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar();

var calendar = $("#calendar").data("kendoCalendar");

calendar.navigate(new Date(2012, 0, 1), "year");
</script>

navigateDown

將導航視圖調低

示例

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar();

var calendar = $("#calendar").data("kendoCalendar");

calendar.navigateDown(new Date(2012, 0, 1));
</script>

navigateToFuture

導航到未來的某個日期

示例

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar();

var calendar = $("#calendar").data("kendoCalendar");

calendar.navigateToFuture();
</script>

navigateToPast

導航到過去的某個日期。

示例

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar();

var calendar = $("#calendar").data("kendoCalendar");

calendar.navigateToPast();
</script>

navigateUp

導航到上方視圖

示例

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar();

var calendar = $("#calendar").data("kendoCalendar");

calendar.navigateUp();
</script>

value

獲取并設置日歷的值

Returns

Date 日歷的值

示例 - 獲取組件的值

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
value: new Date(2013, 10, 10)
});

var calendar = $("#calendar").data("kendoCalendar");

var value = calendar.value();
</script>

示例 - 設置組件的值

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
value: new Date(2013, 10, 10)
});

var calendar = $("#calendar").data("kendoCalendar");

calendar.value(new Date());
</script>

view

獲取當前視圖的實例

Returns

Object 日歷使用的當前視圖的實例

示例

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar();

var calendar = $("#calendar").data("kendoCalendar");

var view = calendar.view();
</script>

Events

change

選中的日期發(fā)生變化時會觸發(fā)這個事件

示例 - 初始化期間觸發(fā) "change" 事件

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
change: function() {
var value = this.value();
console.log(value); //value is the selected date in the calendar
}
});
</script>

示例 - 初始化之后觸發(fā) "change" 事件

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar();

var calendar = $("#calendar").data("kendoCalendar");

calendar.bind("change", function() {
var value = this.value();
console.log(value); //value is the selected date in the calendar
});
</script>

navigate

日歷進行導航時觸發(fā)該事件。

示例 - 初始化期間觸發(fā) "navigate" 事件

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
navigate: function() {
var view = this.view();
console.log(view.name); //name of the current view

var current = this.current();
console.log(current); //currently focused date
}
});
</script>

示例 - 初始化之后觸發(fā)"navigate" 事件

<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar();

var calendar = $("#calendar").data("kendoCalendar");

calendar.bind("navigate", function() {
var view = this.view();
console.log(view.name); //name of the current view

var current = this.current();
console.log(current); //currently focused date
});
</script>

慧都特邀Kendo UI原廠開發(fā)工程師舉行線上公開課，使用該控件的朋友千萬別錯過哦>>