原文网址：
http://www.jb51.net/article/99896.htm
Bootstrap3 日期+时间选择控件的使用方法，供大家参考，具体内容如下
1.支持日期选择，格式设定
2.支持时间选择
3.支持时间段选择控制
4.支持中文
官网地址：http://eonasdan.github.io/bootstrap-datetimepicker/
git地址：https://github.com/Eonasdan/bootstrap-datetimepicker
moment语言包：https://github.com/moment/moment
datetimepicker使用配置说明：http://eonasdan.github.io/bootstrap-datetimepicker/Options/
moment时间格式化使用说明：http://momentjs.com/docs/
使用方法，引用的文件：
|
1
2
3
4
5
6
7
|
<
script
src
=
"../Js/jquery-1.11.3.min.js"
></
script
>
<
link
href
=
"../Js/bootstrap-3.3.5-dist/css/bootstrap.css"
rel
=
"stylesheet"
/>
<
script
src
=
"../Js/bootstrap-3.3.5-dist/js/bootstrap.min.js"
></
script
>
<
link
href
=
"../Js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"../Js/bootstrap-datetimepicker/js/moment-with-locales.min.js"
></
script
>
<
script
src
=
"../Js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"
></
script
>
|
实例1，简单配置：
|
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
|
<
div
class
=
"row"
>
<
div
class
=
'col-sm-6'
>
<
div
class
=
"form-group"
>
<
label
>选择日期：</
label
>
<!--指定 date标记-->
<
div
class
=
'input-group date'
id
=
'datetimepicker1'
>
<
input
type
=
'text'
class
=
"form-control"
/>
<
span
class
=
"input-group-addon"
>
<
span
class
=
"glyphicon glyphicon-calendar"
></
span
>
</
span
>
</
div
>
</
div
>
</
div
>
<
div
class
=
'col-sm-6'
>
<
div
class
=
"form-group"
>
<
label
>选择日期+时间：</
label
>
<!--指定 date标记-->
<
div
class
=
'input-group date'
id
=
'datetimepicker2'
>
<
input
type
=
'text'
class
=
"form-control"
/>
<
span
class
=
"input-group-addon"
>
<
span
class
=
"glyphicon glyphicon-calendar"
></
span
>
</
span
>
</
div
>
</
div
>
</
div
>
</
div
>
|
|
1
2
3
4
5
6
7
8
9
10
|
$(
function
() { <br>
$(
'#datetimepicker1'
).datetimepicker({
format:
'YYYY-MM-DD'
,
locale: moment.locale(
'zh-cn'
)
});
$(
'#datetimepicker2'
).datetimepicker({
format:
'YYYY-MM-DD hh:mm'
,
locale: moment.locale(
'zh-cn'
)
});
});
|
实例2，选择时间段：
|
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
|
<
div
class
=
"row"
>
<
div
class
=
'col-sm-6'
>
<
div
class
=
"form-group"
>
<
label
>选择开始时间：</
label
>
<!--指定 date标记-->
<
div
class
=
'input-group date'
id
=
'datetimepicker1'
>
<
input
type
=
'text'
class
=
"form-control"
/>
<
span
class
=
"input-group-addon"
>
<
span
class
=
"glyphicon glyphicon-calendar"
></
span
>
</
span
>
</
div
>
</
div
>
</
div
>
<
div
class
=
'col-sm-6'
>
<
div
class
=
"form-group"
>
<
label
>选择结束时间：</
label
>
<!--指定 date标记-->
<
div
class
=
'input-group date'
id
=
'datetimepicker2'
>
<
input
type
=
'text'
class
=
"form-control"
/>
<
span
class
=
"input-group-addon"
>
<
span
class
=
"glyphicon glyphicon-calendar"
></
span
>
</
span
>
</
div
>
</
div
>
</
div
>
</
div
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$(
function
() {
var
picker1 = $(
'#datetimepicker1'
).datetimepicker({
format:
'YYYY-MM-DD'
,
locale: moment.locale(
'zh-cn'
),
//minDate: '2016-7-1'
});
var
picker2 = $(
'#datetimepicker2'
).datetimepicker({
format:
'YYYY-MM-DD'
,
locale: moment.locale(
'zh-cn'
)
});
//动态设置最小值
picker1.on(
'dp.change'
,
function
(e) {
picker2.data(
'DateTimePicker'
).minDate(e.date);
});
//动态设置最大值
picker2.on(
'dp.change'
,
function
(e) {
picker1.data(
'DateTimePicker'
).maxDate(e.date);
});
});
|
