LOT.UI分解系列汇总：http://www.cnblogs.com/dunitian/p/4822808.html#lotui
LoT.UI开源地址如下：https://github.com/dunitian/LoTCodeBase/tree/master/LoTUI
先看在LoT.UI里面的应用效果图：
关键代码解析：（https://github.com/dunitian/LoTCodeBase/blob/master/LoTUI/Manager/Demo/datepicker.html）
头部引用CSS:
日期选择器定义
引入Script并初始化
案例代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<meta http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<title>datepicker</title>
<link rel=
"stylesheet"
href=
"http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css"
>
<link href=
"/open/bootstrap-datepicker/bootstrap-datetimepicker.min.css"
rel=
"stylesheet"
/>
<!--[
if
lt IE 9]>
<script src=
"https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"
></script>
<script src=
"https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"
></script>
<![endif]-->
</head>
<body>
<div
class
=
"col-lg-1"
></div>
<div
class
=
"col-lg-3"
>
<div
class
=
"input-group"
>
<span
class
=
"input-group-addon"
>时间</span><input type=
"text"
class
=
"form-control lot-time"
placeholder=
"请选择时间..."
>
</div>
</div>
<script src=
"http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"
></script>
<script src=
"http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
<script src=
"/open/bootstrap-datepicker/bootstrap-datetimepicker.min.js"
></script>
<script src=
"/open/bootstrap-datepicker/bootstrap-datetimepicker.zh-CN.js"
></script>
<script type=
"text/javascript"
>
//时间控件
$(function () {
$(
'.lot-time'
).datetimepicker({
format:
"yyyy-mm-dd hh:ii"
,
todayBtn:
"linked"
,
language:
"zh-CN"
,
autoclose:
true
});
})
</script>
</body>
</html>
|
推荐组件：https://github.com/smalot/bootstrap-datetimepicker
原有组件：https://github.com/eternicode/bootstrap-datepicker
本文转自毒逆天博客园博客，原文链接：http://www.cnblogs.com/dunitian/p/5524019.html，如需转载请自行联系原作者
