Bootstrap v3.3.5
css
|
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
39
|
/* ======================================== ys-datetimepicker ======================================== */
.ys-datetimepicker{
position
:
relative
;
width
:
100%
;
height
:
32px
;
cursor
:
pointer
;
}
.ys-datetimepicker>input.form-control{
width
:
100%
;
height
:
32px
;
background-color
:
#fff
;
border-radius:
0
;
cursor
:
pointer
;
border
:
1px
solid
#ccc
;
padding-left
:
10px
;
}
.ys-datetimepicker:after{
content
:
""
;
position
:
absolute
;
top
:
0
;
right
:
0
;
display
:
block
;
width
:
32px
;
height
:
32px
;
background
:
url
(../../images/common/ys-datetime-
icon
.png)
no-repeat
center
center
;
background-
size
:
20px
20px
;
border
:
1px
solid
#ccc
;
}
.datetimepicker.datetimepicker-dropdown-bottom-
right
.dropdown-menu .datetimepicker-minutes .minute.active,
.datetimepicker.datetimepicker-dropdown-bottom-
right
.dropdown-menu .datetimepicker-hours .hour.active,
.datetimepicker.datetimepicker-dropdown-bottom-
right
.dropdown-menu .datetimepicker-days .day.active,
.datetimepicker.datetimepicker-dropdown-bottom-
right
.dropdown-menu .datetimepicker-months .month.active,
.datetimepicker.datetimepicker-dropdown-bottom-
right
.dropdown-menu .datetimepicker-years .year.active{
background-image
:
none
;
background-color
:
#e64e4d
;
}
|
html
|
1
2
3
4
|
<
div
class
=
"ys-datetimepicker"
>
<
input
size
=
"16"
class
=
"form-control"
type
=
"text"
value
=
"2015-10-01"
readonly
=
""
/>
|
javascript
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$(
".ys-datetimepicker input"
).datetimepicker({
language:
"zh-CN"
,
format:
"yyyy-mm-dd"
,
todayBtn:
"linked"
,
startView:2,
minView:2,
weekStart: 1,
todayHighlight: 1,
autoclose: 1,
forceParse: 0
});
$(
".ys-datetimepicker"
).on(
"click"
,
function
(e){
e.stopPropagation();
e.preventDefault();
$(
this
).closest(
".ys-datetimepicker"
).find(
"input"
).datetimepicker(
"show"
);
});
|