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