html引入kendo日期控件,HTML5 Web app开发工具Kendo UI Web教程：如何配置Kendo UI Calendar...

Kendo UI Web包含数百个创建HTML5 web app的必备元素，包括UI组件、数据源、验证、一个MVVM框架、主题、模板等。本文来看看如何配置Kendo UI Calendar。

1、创建新的操作方法来显示视图：

public ActionResult Index()

{

return View();

}

2、添加日历

WebForms

.Name("calendar") //The name of the calendar is mandatory. It specifies the "id" attribute of the widget.

.Min(new DateTime(2010, 1, 1, 10, 0, 0)) //Set min time of the calendar

.Max(new DateTime(2010, 1, 1, 20, 0, 0)) //Set min date of the calendar

.Value(DateTime.Now) //Set the value of the calendar

%>

Razor

@(Html.Kendo().Calendar()

.Name("calendar") //The name of the calendar is mandatory. It specifies the "id" attribute of the widget.

.Min(new DateTime(2010, 1, 1, 10, 0, 0)) //Set min time of the calendar

.Max(new DateTime(2010, 1, 1, 20, 0, 0)) //Set min date of the calendar

.Value(DateTime.Now) //Set the value of the calendar

)

访问Existing Calendar

通过jQuery.data()引用一个现有日历实例，一旦建议了引用，就可以使用API来控制它的行为。

访问现有日历实例

//Put this after your Kendo Calendar for ASP.NET MVC declaration

$(function() {

// Notice that the Name() of the calendar is used to get its client-side instance

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

});

处理Kendo UI Calendar事件

通过Kendo UI Calendar可以订阅所有的事件。

WebForms -由处理程序名称订阅

.Name("calendar")

.Events(e => e

.Change("calendar_change")

.Navigate("calendar_navigate")

)

%>

function calendar_navigate() {

//Handle the navigate event

}

function calendar_change() {

//Handle the change event

}

Razor -由处理程序名称订阅

@(Html.Kendo().Calendar()

.Name("calendar")

.Events(e => e

.Change("calendar_change")

.Navigate("calendar_navigate")

)

)

function calendar_navigate() {

//Handle the navigate event

}

function calendar_change() {

//Handle the change event

}

Razor -通过模板委托订阅

@(Html.Kendo().Calendar()

.Name("calendar")

.Events(e => e

.Change(@

function() {

//Handle the change event inline

}

)

.Navigate(@

function() {

//Handle the navigate event inline

}

)

)

慧都特邀Kendo UI原厂开发工程师举行线上公开课，使用该控件的朋友千万别错过哦>>查看详情

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自：慧都控件网