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 = "" />
</ div >

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" );
});