日历时间插件
下面介绍两款插件：
1、Bootstrap的组件：datetimepicker
以下两个步骤就可以实现日历插件的使用：
1 <tr> 2 <td align="right">开始时间：</td> 3 <td> 4 <input class="form-control" style="width:150px;" type="text" id="starttime" name="starttime" autocomplete="off" value=""> 5 </td> 6 </tr> 7 8 <tr> 9 <td align="right">结束时间：</td> 10 <td> 11 <input class="form-control" style="width:150px;" type="text" id="endtime" name="endtime" autocomplete="off" value=""> 12 </td> 13 </tr>
1 <link rel="stylesheet" type="text/css" href="/Public/js/jquery.datetimepicker/jquery.datetimepicker.min.css"/> 2 <script src="/Public/js/jquery.datetimepicker/jquery.datetimepicker.full.min.js"></script> 3 <script language="javascript"> 4 // 初始化日期时间控件 5 function initDatetimepicker(jqid) { 6 if (jqid == '') { 7 return; 8 } 9 10 var option = { 11 lang: "ch", 12 format: "Y-m-d H:i", 13 timepicker: true, 14 todayButton: false, 15 defaultSelect:false, 16 // minDate: 0, 17 scrollMonth : false, 18 step: 10, 19 onChangeDateTime: function (dp, $input) { 20 $(this).trigger('blur');// 触发html5-placeholder-shim 21 } 22 }; 23 24 var source = $('#menu').val(); 25 if( source != 'orderadditional' ) { 26 option['minDate'] = 0; 27 } 28 $('#' + jqid).datetimepicker(option); 29 } 30 31 // 设置中文简体 32 $.datetimepicker.setLocale('ch'); 33 // 用车时间起 34 initDatetimepicker('starttime'); 35 // 用车时间止步 36 initDatetimepicker('endtime'); 37 </script>
插件下载：http://pan.baidu.com/s/1pKLvg87
2、mobiscroll插件 （兼容PC端和移动端）
官网文档：https://mobiscroll.com
https://demo.mobiscroll.com/
3、WdatePicker
http://blog.csdn.net/wanglei19880622/article/details/8051322
