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

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

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

官网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{ 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:''; 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

原文地址:https://www.cnblogs.com/bigbrid/p/6912934.html