kendo ui - DatePicker 日期时间系列
kendo-ui 官网:https://www.telerik.com/documentation
初始化 grid:
引入文件:
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"/> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.culture.zh-CN.min.js"></script> <!-- 汉化日期 -->
1. 定义日期时间:
创建时间盒子:
<div class="content" style="width: 400px;margin: 50px auto;border: 1px solid #ccc;padding: 20px;">
<h4>开始时间:</h4>
<input id="start" style="width: 100%;" value="2018/01/01" />
<h4 style="margin-top: 2em">结束时间:</h4>
<input id="end" style="width: 100%;" value="2018/01/01"/>
</div>
定义js:
$(document).ready(function() {
kendo.culture("zh-CN"); //需声明汉化
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({
change: startChange,
format: "yyyy/MM/dd" //定义时间格式 例如yyyy-MM-dd , dd/mm/yyyy , MMMM yyyy等
}).data("kendoDatePicker"); var end = $("#end").kendoDatePicker({
change: endChange,
format: "yyyy/MM/dd"
}).data("kendoDatePicker"); start.max(end.value());
end.min(start.value());
});
2.定义详细时间:
创建时间盒子:
<div class="content" style="width: 400px;margin: 50px auto;border: 1px solid #ccc;padding: 20px;">
<h4>开始时间:</h4>
<input id="start" style="width: 100%;" />
<h4 style="margin-top: 2em;">结束时间:</h4>
<input id="end" style="width: 100%;" />
</div>
定义js:
$(document).ready(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 today = kendo.date.today(); var start = $("#start").kendoDateTimePicker({
value: today,
change: startChange,
format: "yyyy-MM-dd hh:mm tt" //定义时间格式
}).data("kendoDateTimePicker"); var end = $("#end").kendoDateTimePicker({
value: today,
change: endChange,
format: "yyyy-MM-dd hh:mm tt"
}).data("kendoDateTimePicker"); start.max(end.value());
end.min(start.value());
});
关于时间格式 详细参考:
https://docs.telerik.com/kendo-ui/framework/globalization/dateformatting
kendo ui - DatePicker 日期时间系列的更多相关文章
- layDate/DatePicker日期时间空间
真心不错,果断收藏了. 1.示例与效果 2.更多示例与皮肤 补充说明:My97DatePicker日期时间插件 的使用 1.示例与效果 2. 更多 常用的实例:WdatePicker下载 http:/ ...
- kendo ui - grid 数据表格系列
kendo-ui 官网:https://www.telerik.com/documentation 初始化 grid: 引入文件: <link rel="stylesheet" ...
- kendo ui - MultiSelect 多选系列
kendo-ui 官网:https://www.telerik.com/documentation 初始化 grid: 引入文件: <link rel="stylesheet" ...
- kendo ui DatePicker 时区转换
http://blog.darkthread.net/post-2013-06-25-json-date-timezone-issue.aspx
- Kendo UI使用笔记
1.Grid中的列字段绑定模板字段方法参数传值字符串加双引号: 上图就是个典型的例子,openSendWin方法里Id,EmergencyTitle,EmergencyDetail 三个参数,后两个参 ...
- 构建的Web应用界面不够好看?快试试最新的Kendo UI R3 2019
通过70多个可自定义的UI组件,Kendo UI可以创建数据丰富的桌面.平板和移动Web应用程序.通过响应式的布局.强大的数据绑定.跨浏览器兼容性和即时使用的主题,Kendo UI将开发时间加快了50 ...
- Kendo UI for jQuery使用教程:入门指南
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI使用教程:入门指南
[Kendo UI最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support for React和 ...
- 「版本升级」界面控件Kendo UI正式发布R2 2019|附下载
通过70多个可自定义的UI组件,Kendo UI可以创建数据丰富的桌面.平板和移动Web应用程序.通过响应式的布局.强大的数据绑定.跨浏览器兼容性和即时使用的主题,Kendo UI将开发时间加快了50 ...
随机推荐
- 【java基础】从反射开始(Reflection)
Java学习笔记 https://github.com/SnailDev/java-learning 和我一起启程... 反射(Reflection) 定义 在运行状态中, 对于任意的一个类,都能够知 ...
- Fastify 系列教程一 (路由和日志)
Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) Fastify ...
- LOJ#6271. 「长乐集训 2017 Day10」生成树求和 加强版
传送门 由于是边权三进制不进位的相加,那么可以考虑每一位的贡献 对于每一位,生成树的边权相当于是做模 \(3\) 意义下的加法 考虑最后每一种边权的生成树个数,这个可以直接用生成函数,在矩阵树求解的时 ...
- htm-文字标签和注释标签
文字标签:修改文字的样式 <font></font> 属性: size:文字的大小 取值范围 1-7,超出了7,默认还是7 color:文字颜色 两种表示方法 英文单词:re ...
- vscode 代码跳转之PHP篇
1.安装插件:PHP IntelliSense 2.配置:"php.executablePath": "C:\\php\\php.exe", 但是目前有问题,跨 ...
- 判断css文件是否加载完成
function cssReady(fn, link) { var d = document, t = d.createStyleSheet, r = t ? 'rules' : 'cssRules' ...
- 【MUI框架】学习笔记整理 Day 1
MUI 框架之 [原生UI] (1)accordion(折叠面板) 由二级列表演化而来 <ul class="mui-table-view"> 2 <li cla ...
- ArcGIS10.3+Oracle12C+ArcGIS Server10.3安装布署(之二)
1.创建PDB 输入 dbca 命令 2.安装完成后,连接PDBSDE的容器数据库 3.环境变量 从Oracle的官方网站下载 instantclient-basic-nt-12.1.0.2.0. ...
- 今年新鲜出炉的30个流行Android库,你一定需要
作者|Michal Bialas 2017年快过去了,你年初的定的目标都快完成了吗?总结过去三个月内发布的 最新的30 个 Android 库和项目.你一定需要,建议收藏!让你事半功倍 1.Mater ...
- shell_advanced
1.輸入輸出,重定向,管道 2.<(cmd):>(cmd) 3.>:<:>>:<<:>>>:<<< 4.文本处理_1 ...