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

Methods

current

獲取當(dāng)前選中的日期

Returns

Date 日歷中顯示的當(dāng)前聚焦的日期

示例

<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

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

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

示例

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

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

calendar.destroy();
</script>

max

獲取并設(shè)置日歷的最大值。

Returns

Date 日歷的最大值

示例 - 獲取日歷的最大值

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

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

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

示例 - 設(shè)置日歷的最大值

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

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

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

min

獲取或設(shè)置日歷的最小值

Returns

Date 日歷的最小值

示例-獲取日歷的最小值

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

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

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

示例-設(shè)置日歷的最小值

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

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

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

navigate

導(dǎo)航視圖

示例

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

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

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

navigateDown

將導(dǎo)航視圖調(diào)低

示例

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

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

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

navigateToFuture

導(dǎo)航到未來的某個日期

示例

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

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

calendar.navigateToFuture();
</script>

navigateToPast

導(dǎo)航到過去的某個日期。

示例

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

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

calendar.navigateToPast();
</script>

navigateUp

導(dǎo)航到上方視圖

示例

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

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

calendar.navigateUp();
</script>

value

獲取并設(shè)置日歷的值

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>

示例 - 設(shè)置組件的值

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

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

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

view

獲取當(dāng)前視圖的實例

Returns

Object 日歷使用的當(dāng)前視圖的實例

示例

<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

日歷進(jìn)行導(dǎo)航時觸發(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ā)工程師舉行線上公開課，使用該控件的朋友千萬別錯過哦>>