代码改变世界

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

2017-05-27 15:07  taozsay  阅读(1030)  评论(0)  编辑  收藏  举报

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

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

官网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; }

 

当然还需要基础的jquery.js和bootstrap.css

 

==============2017.6.30更新=============

手机上的时间控件使用的是mobiscroll

参考：http://www.oschina.net/question/2273297_195678

onBeforeShow:function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; }//弹掉“日”滚轮 

在线演示：http://www.jq22.com/yanshi4976

Demo:http://pan.baidu.com/s/1dFksQcT   密码：nhwp

 

最后找到一个兼容PC和手机端的日期选择控件

附上链接：http://www.bcty365.com/demo-133-610-2.html