三款日期選擇插件推薦給大家：
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="external nofollow" rel="stylesheet" type="text/css" /> <!-- 添加動畫效果 --> <!-- <link href="dev/css/mobiscroll.animation-2.5.2.css" rel="external nofollow" rel="stylesheet" type="text/css" /> --> <!-- 安卓樣式 --> <link href="dev/css/mobiscroll.android-ics-2.5.2.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <!-- 或者引用一整個壓縮好的css文件 --> <!-- <link href="css/mobiscroll.custom-2.5.2.min.css" rel="external nofollow" 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就是設置的延遲時間，這樣以來再做相同的操作，就是等之前的軟鍵盤下沉消失之后從底部浮上顯示日期選擇部件。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
