KendoUI系列：DatePicker
2024-10-10 00:08:51
1、基本使用
<link href="@Url.Content("~/C ontent/kendo/2014.1.318/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/kendo.web.min.js")" type="text/javascript"></script>
<input id="datePicker" />
<script type="text/javascript">
$(function () {
$("#datePicker").kendoDatePicker();
});
</script>
效果预览：
2、设置日期格式
<script type="text/javascript">
$(function () {
$("#datePicker").kendoDatePicker({
format: "yyyy-MM-dd"
});
});
</script>
3、初始化当前日期
<script type="text/javascript">
$(function () {
$("#datePicker").kendoDatePicker({
format: "yyyy-MM-dd",
value: new Date()
});
});
</script>
4、设置本地化
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/cultures/kendo.culture.zh-CN.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
kendo.culture("zh-CN");
$("#datePicker").kendoDatePicker({
format: "yyyy-MM-dd",
value: new Date()
});
});
</script>
效果预览：
5、设置日期选择范围
Start Date:<input id="start" />
End Date:<input id="end" />
<script type="text/javascript">
$(function () {
function startChange() {
var startDate = start.value(),
endDate = end.value(); if (startDate) {
startDate = new Date(startDate);
startDate.setDate(startDate.getDate());
end.min(startDate);
} else if (endDate) {
start.max(new Date(endDate));
} else {
endDate = new Date();
start.max(endDate);
end.min(endDate);
}
} function endChange() {
var endDate = end.value(),
startDate = start.value(); if (endDate) {
endDate = new Date(endDate);
endDate.setDate(endDate.getDate());
start.max(endDate);
} else if (startDate) {
end.min(new Date(startDate));
} else {
endDate = new Date();
start.max(endDate);
end.min(endDate);
}
} var start = $("#start").kendoDatePicker({
format: "yyyy-MM-dd",
change: startChange
}).data("kendoDatePicker"); var end = $("#end").kendoDatePicker({
format: "yyyy-MM-dd",
change: endChange
}).data("kendoDatePicker"); start.max(end.value());
end.min(start.value());
});
</script>
效果预览：
6、参考资料
http://demos.telerik.com/kendo-ui/datepicker/index
最新文章
- 【翻译】理念:无冲突的扩展本地DOM原型
- WPF入门教程系列六——布局介绍与Canvas（一）
- php验证登录
- xcode添加音效
- 标签简化Spring-MVC配置
- C之五子棋
- 关于去哪儿网的UI自动化测试脚本（Python实现）
- javaBean登录注册
- ueditor插件 -- 插入填空题
- ubuntu下安装mongodb
- SpringBoot 中 @RestController 和 @Controller 的区别
- Linux vsftpd 安装配置使用
- Dining POJ - 3281
- 独热编码和dummy编码的作用
- jQuery选择器--selector1,selector2,selectorN和ancestor descendant
- GJP_Project
- 第二阶段——个人工作总结DAY08
- setsockopt调用IP_ADD_MEMBERSHIP出错errno：19 no such device
- springMVC数据交互
- spring mvc ajax异步文件的上传和普通文件上传