Kendo UI API中文介绍五:Calendar (2)

原创|使用教程|编辑:我只采一朵|2014-05-30 11:47:38.000|阅读 1558 次

概述:本节为你介绍的是 Kendo.ui.Calenda日历组件的方法和事件。

相关链接:

本节为你介绍的是 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

获取并设置日历的最大值。

参数
value Date | String 可以设置的最大值

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

获取或设置日历的最小值

参数
value Date | String 设置最小值

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

导航视图

参数
value Date 期望的日期
view String 期望的视图

示例

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

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

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

navigateDown

将导航视图调低

参数
value Date 期望的日期值

示例

<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

获取并设置日历的值

参数
value Date|String 设置的日期

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原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui 公开课



标签:日历KendoUI

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

Kendo UI Mobile

使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架

Kendo UI DataViz

跨平台跨设备的数据可视化组件

Kendo UI Server Wrappers

帮助你开发基于Kendo UI的出色的HTML5应用程序,并且无需亲自编写JavaScript。

Kendo UI Core

Kendo UI Core是Kendo UI的开源免费版,是HTML5构架下的用于网络和移动开发的工具。

Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat