自定义datetimepicker日期控件
2016-06-07 13:17
603 查看
Bootstrap v3.3.5
css
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(../../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
<!-- 日期控件 --> <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"); });
相关文章推荐
- java-WEB中的监听器Lisener
- GUI - Web前端开发框架
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- bootstrap初试进度条
- 5个常见可用性错误和解决方案
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- MyEclipse Web Project转Eclipse Dynamic Web Project
- axis备忘
- js数组实现图片轮播
- angular 指令简述
- 创业如何选择WEB开发语言
- Erlang实现的一个Web服务器代码实例
- 防止网页脚本病毒执行的方法-from web
- js可突破windows弹退效果代码
- 自学成才的秘密:115个 web Develop 资源
- JSP脚本漏洞面面观
- 使用批处理修改web打印设置笔记 适用于IE
- 使用BAT一句话命令实现快速合并JS、CSS