Bootstrap v3.3.5
css
/* ======================================== 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(../../p_w_picpaths/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-p_w_picpath:none;
background-color:#e64e4d;
}
html
<!-- 日期控件 -->
<div class="ys-datetimepicker">
<input size="16" class="form-control" type="text" value="2015-10-01" readonly=""/>
</div>
javascript
$(".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"); });
转载于:https://blog.51cto.com/antlove/1786903