如何理解自定义datetimepicker日期控件,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
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");
});
看完上述内容,你们掌握如何理解自定义datetimepicker日期控件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。