1.My97DatePicker
纯原生JS，专注于PC端，支持IE6+；页面上只需要引入WdatePicker.js文件，但是My97DatePicker整个目录是一个整体，最好不要破坏里面的目录结构，否则就会报错找不到指定文件。
(1)直接在html文件中写入
<input id="ipt" type="text" onclick="WdatePicker()" />
注意：由于此插件是原生JS写的，所以绑定点击事件请务必请用原生JS的点击事件绑定方法，如果使用$(\'#ipt\').on(\'click\',function( ){ })，在选中一个日期并失去焦点后，想要重新选择就必须点击两次次才能唤起日历。
(2)如果给输入框添加class="Wdate"，输入框的右边会出现一个日期图标。
(3)可以通过其他元素来弹出日期选择框，直接给该元素添加onclick="WdatePicker({el: \'#ipt\'})"
(4)可以通过添加position属性来定义弹出位置，例如 onclick="WdatePicker({position: {left:100,top:50}})"
(5)可以通过添加dateFmt属性来定义日期格式，例如 onclick="WdatePicker({dateFmt: \'MM-yy\'})"
(6)如果没有定义onpicked和oncleared事件，将自动触发文本框的onchange事件，定义这些事件的方式如下
document.getElementById(\'ipt\').onclick = function(){ WdatePicker({ onpicked: function(){ // 配合jquery.validate.js插件，在这里手动添加校验 }, oncleared: function(){ // 配合jquery.validate.js插件，在这里手动添加校验 }, }); }
(7)可以实现日期选择联动
<input id="d5221" type="text" onfocus="var d5222=$dp.$(\'d5222\');WdatePicker({onpicked:function(){d5222.focus();},maxDate:\'#F{$dp.$D(\\'d5222\\')}\'})" /> <input id="d5222" type="text" onfocus="WdatePicker({minDate:\'#F{$dp.$D(\\'d5221\\')}\'})" />
(8)还能将选中的值拆分到文本框
<input type="text" id="d523_y" size="5" /> 年 <input type="text" id="d523_M" size="3" /> 月 <input type="text" id="d523_d" size="3" /> 日 <input type="text" id="d523_HH" size="3" /> 时 <input type="text" id="d523_mm" size="3" /> 分 <input type="text" id="d523_ss" size="3" /> 秒 <img onclick="WdatePicker({el:\'d523\',dateFmt:\'yyyy-MM-dd HH:mm:ss\',onpicked:pickedFunc})" src="../../My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer" /> <script> function pickedFunc(){ $dp.$(\'d523_y\').value=$dp.cal.getP(\'y\'); $dp.$(\'d523_M\').value=$dp.cal.getP(\'M\'); $dp.$(\'d523_d\').value=$dp.cal.getP(\'d\'); $dp.$(\'d523_HH\').value=$dp.cal.getP(\'H\'); $dp.$(\'d523_mm\').value=$dp.cal.getP(\'m\'); $dp.$(\'d523_ss\').value=$dp.cal.getP(\'s\'); } </script>
更多功能和参数请去官网查询http://www.my97.net/dp/demo/resource/3.asp。
2.jquery.datepicker.js
主要用于PC端，需要同时引入jquery.js和jquery-ui.js，样式方面除了引入jquery-ui.css，还要带上jquery-ui目录中的images文件夹，否则就会报错找不到指定的文件。
(1)引入相关文件后，直接就是$(\'#ipt\').datepicker( );
(2)常用的几个参数配置如下
$("#ipt").datepicker({
numberOfMonths:1, // 显示几个月
showButtonPanel:true, // 是否显示按钮面板
dateFormat: \'yy-mm-dd\', // 日期格式
clearText:"清除", // 清除日期的按钮名称
closeText:"关闭", // 关闭选择框的按钮名称
yearSuffix: \'年\', // 年的后缀
showMonthAfterYear:true, // 是否把月放在年的后面
defaultDate:\'2011-03-10\', // 默认日期
minDate:\'2011-03-05\', // 最小日期
maxDate:\'2011-03-20\', // 最大日期
monthNames: [\'一月\',\'二月\',\'三月\',\'四月\',\'五月\',\'六月\',\'七月\',\'八月\',\'九月\',\'十月\',\'十一月\',\'十二月\'],
dayNames: [\'星期日\',\'星期一\',\'星期二\',\'星期三\',\'星期四\',\'星期五\',\'星期六\'],
dayNamesShort: [\'周日\',\'周一\',\'周二\',\'周三\',\'周四\',\'周五\',\'周六\'],
dayNamesMin: [\'日\',\'一\',\'二\',\'三\',\'四\',\'五\',\'六\'],
onSelect: function(selectedDate) {
// 选择日期后执行的操作
alert(selectedDate);
}
});
3.Mobiscroll
专注于移动端，依赖于jquery类库，有多种样式可供选择，根据需要引入各类文件。
(1)demo如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <title>Mobiscroll日期时间插件</title> <!-- 核心CSS样式 --> <link href="dev/css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" /> <!-- 添加动画效果 --> <!-- <link href="dev/css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" /> --> <!-- 安卓样式 --> <link href="dev/css/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" /> <!-- 或者引用一整个压缩好的css文件 --> <!-- <link href="css/mobiscroll.custom-2.5.2.min.css" rel="stylesheet" type="text/css" /> --> <style type="text/css"> .dwl{ font-size: 20px; } .dwbg .dwb{ font-size: 20px; } table td:first-child{ padding-right: 15px; } table td:last-child{ padding-left: 15px; } table .dww{ min-width: 150px !important; } </style> </head> <body> <input type="text" name="appDate" id="appDate" /> <!-- jquery类库 --> <script src="dev/jquery-1.9.1.js"></script> <!-- 核心js文件 --> <script src="dev/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script> <!-- 添加中文 --> <!-- <script src="dev/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script> --> <!-- 针对日期时间 --> <script src="dev/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script> <!-- 添加中文 --> <!-- <script src="dev/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script> --> <!-- 安卓端 --> <!-- <script src="dev/js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script> --> <!-- 或者引用一整个压缩好的js文件 --> <!-- <script src="js/mobiscroll.custom-2.5.2.min.js" type="text/javascript"></script> --> <script type="text/javascript"> $(function () { var currYear = (new Date()).getFullYear(); var opt={}; opt.date = {preset : \'date\'}; opt.default = { theme: \'android-ics light\', // 皮肤样式 display: \'bottom\', // 显示方式 mode: \'scroller\', // 日期选择模式 startYear: currYear , //开始年份 endYear: currYear + 30, //结束年份 dateFormat: \'mm/yyyy \', // 日期格式 dateOrder: \'mmyy\', // 面板中日期排列格 setText: \'确定\', // 确认按钮名称 cancelText: \'取消\',// 取消按钮名籍我 monthText: \'月\', // 面板中月文字 yearText: \'年\', // 面板中年文字 }; $("#appDate").val(\'\').scroller(\'destroy\').scroller($.extend(opt[\'date\'], opt[\'default\'])); }); </script> </body> </html>
(2)解决与移动端软键盘的定位冲突
如果页面有多个输入框，当点击一个输入框时会唤起设备自带的软键盘，然后如果直接点击另一个id名为appDate的日期输入框，即失去焦点的同时，获取到了mobiscroll绑定的输入框的焦点，结果发现之前的软键盘下沉消失之后，本该显示在底部的日期选择部件显示在了屏幕的上方，解决办法是找到mobiscroll.core-2.5.2.js 这个文件，搜索focus关键字，将对应的地方改成：
elm.bind(\'focus.dw\', function () { setTimeout(function(){ that.show(); },300) });
其中300ms就是设置的延迟时间，这样以来再做相同的操作，就是等之前的软键盘下沉消失之后从底部浮上显示日期选择部件。