推荐于2016-09-30 · 知道合伙人互联网行家
代码如下:
Extjs 时间选择控件
这是实现时间控件选择的方法
<script type="text/javascript">
Ext.onReady(function () {
var times = new Ext.form.TimeField({
increment: 10, //时间间隔
minValue: '08:00 AM', //最小显示的时间
renderTo: Ext.get('times'), //
autoShow: true,
format: 'H:i', //显示格式,H代表小时;i代表分钟;m代表秒
width: 60
}
});
});
</script>
下面是html的控件
<div id="times" style="margin-left:40px;"></div>
完整的页面如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="http://blog.163.com/sam_0815/blog/Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="http://blog.163.com/sam_0815/blog/Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="http://blog.163.com/sam_0815/blog/Ext/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
var times = new Ext.form.TimeField({
increment: 10,
minValue: '08:00 AM',
renderTo: Ext.get('times'),
autoShow: true,
format: 'H:i',
width: 60
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="times" style="margin-left:40px;"></div>
</div>
</form>
</body>
</html>
运行结果: