JQuery日期选择控件-兼容手机端

最新推荐文章于 2022-09-05 16:14:00 发布

weixin_34014555

最新推荐文章于 2022-09-05 16:14:00 发布

阅读量486

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bigbrid/p/6912934.html

版权

在项目中经常使用到日期时间控件。

用的时候总是临时去找，现在记录下，以备下次使用。

官网http://www.bootcss.com/p/bootstrap-datetimepicker/

需要引用一个CSS，两个JS

bootstrap-datetimepicker.css

bootstrap-datetimepicker.min.js

bootstrap-datetimepicker.zh-CN.js

在页面添加事件。

 1 <script>
 2     $("input[data-type='datetime']").datetimepicker({    
 3             format:'yyyy-mm-dd',           // 时间显示格式  默认值: ‘mm/dd/yyyy’ 
 4             weekStart: 1,                  // 一周从哪天开始
 5             todayBtn:  true,               // 是否显示当天日起按钮
 6             language: 'zh-CN',             // 语言显示格式，默认'en'
 7             showMeridian: false,           //是否显示上下午
 8             keyboardNavigation: false,     //是否允许通过方向键改变日期
 9             todayHighlight: true,          // 当天日期是否高亮显示
10             autoclose: false,              // 当选择一个日期之后是否立即关闭此日期时间选择器
11             pickerPosition: "bottom-left", // 选择框位置,可选参数：'bottom-right', bottom-left’，’top-right’，’top-left’
12             minView: 2,    // 日期时间选择器所能够提供的最精确的时间选择视图，默认值：0，可选参数：0（小时）、1（天）、2（月）、3（年）、4（十年）
13             startView: 2,   // 日期时间选择器打开之后首先显示的视图，默认值：2，可选参数：0（小时）、1（天）、2（月）、3（年）、4（十年）
14             forceParse: true,   // 当输入的格式不正规时，强制尽量解析成规定的格式
15                                                 });
16 </script>

可能会用到的css

 1 .datetimepicker .today{ background: #eee; }
 2 .datetimepicker .fa{ width:6px; height:10px; margin-left:6px; background-size: 100% 100% !important; display: block; }
 3 .datetimepicker .fa-angle-left{ background: url(/images/icon_right.png) no-repeat; transform: rotate(180deg); }
 4 .datetimepicker .fa-angle-right{ background: url(/images/icon_right.png) no-repeat; }
 5 .datetimepicker th{ font-weight: normal; color:#999; }
 6 div[data-control-type='datetime'] .controls{ position: relative; }
 7 div[data-control-type='datetime'] .controls input{ background: none; cursor: pointer; }
 8 div[data-control-type='datetime'] .controls.hideImg:before{ display:none;}
 9 div[data-control-type='datetime'] .controls:before{ content:''; width:26px; height:26px; background: url(/form/images/calendar.png) no-repeat; position: absolute; right: 12px; top: 0; }
10 form .form-group:last-child { margin-bottom: 9px; }
11 
12 .datetimepicker  td, .datetimepicker th{ padding:0 2px !important; }