第二十九章:DateTimeBox(日期时间输入框)组件
学习要点:
- 加载方式
- 属性列表
- 方法列表
一、加载方式:
1.class加载方式:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<input id="box" class="easyui-datetimebox">
</body>
</html>
2.JS调用加载:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<input id="box">
</body>
</html>
$(function(){
$.('#box').datetimebox({
value:'2015-12-01 12:23:02',
});
});
二、属性列表:
DateTimeBox属性,扩展自DateBox(日期输入框)组件 | ||
---|---|---|
属性名 | 值 | 说明 |
timeSeparator | string | 定义在小时、分钟和秒之间的分隔线。默认值为“:”。 |
showSeconds | boolean | 定义是否显示秒钟信息。默认值为false。 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<input id="box">
</body>
</html>
$(function(){
$.('#box').datetimebox({
value:'2015-12-01 12:02:12',
timeSeparator:'/',
showSeconds:false,
});
});
三、方法列表:
DateTimeBox方法,扩展自DateBox(日期输入框) | ||
---|---|---|
方法名 | 传参 | 说明 |
options | none | 返回属性对象。 |
setValue | value | 设置日期时间输入框的值。 |
spinner | none | 返回时间微调器对象。 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<input id="box">
</body>
</html>
$(function(){
$.('#box').datetimebox({
});
$.('#box').datetimebox('setValue','2015-12-01 17:11:22');
console.log($.('#box').datetimebox('spinner').spinner('getValue'));
});
PS:我们可以使用$.fn.datetimebox.defaults重写默认值对象。
作者:Roger_CoderLife
链接:https://blog.csdn.net/Roger_CoderLife/article/details/103060965
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档,转载请注明原文出处,欢迎转载