您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
如何理解自定义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日期控件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。