永利最大(官方)网站

本节为你介绍的是 Kendo.ui.Calendar，分为上下两节，本节为大家介绍的是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

选中的日期发生变化时会触发这个事件

示例 - 初始化期间触发 "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>

示例 - 初始化之后触发 "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

日历进行导航时触发该事件。

示例 - 初始化期间触发 "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>

示例 - 初始化之后触发"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原厂开发工程师举行线上公开课，使用该控件的朋友千万别错过哦>>