前一陣子接觸到了mobiscroll插件，用在移動端的日期選擇上，感覺倍棒，於是便敲了一個小案例，與大家一起分享分享
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>mobiscroll練習</title> 9 <link rel="stylesheet" type="" href="../06-mobiscoll插件案例/css/mobiscroll.custom-2.17.1.min.css"> 10 </head> 11 12 <body> 13 <input type="text" id="input" name="" value=""> 14 <button id="clear">clear</button> 15 <button id="show">show</button> 16 17 <script src="../01-demo/jquery-1.8.3.min.js"></script> 18 <script src="../06-mobiscoll插件案例/js/mobiscroll.custom-2.17.1.min.js"></script> 19 <script> 20 $(function () { 21 var now = new Date(); 22 var currYear = now.getFullYear(); 23 var currMonth = now.getMonth() + 1; 24 var currDay = now.getDate(); 25 var option = { 26 preset: 'date', //日期，可選：date\datetime\time\tree_list\image_text\select 27 theme: 'android-ics light', //皮膚樣式，可選：default\android\android-ics light\android-ics\ios\jqm\sense-ui\wp light\wp 28 display: 'modal', //顯示方式 ，可選：modal\inline\bubble\top\bottom 29 lang: "Chinese", 30 showLabel: true,//false 顯示頭部 31 rows: 5,//顯示多少行，定義3就顯示3行, 32 dateFormat: 'yyyy-mm-dd', // 面板日期格式 33 setText: '確認', //確認按鈕名稱 34 cancelText: '取消', //取消按鈕名稱 35 dateOrder: 'yyyymmdd', //面板中日期排列格式 36 dayText: '日', 37 monthText: '月', 38 yearText: '年', //面板中年月日文字 39 // showNow: false, 40 nowText: "今", 41 endYear: currYear + 10, //結束年份 42 minDate: new Date(currYear, currMonth - 1, currDay + 1), 43 onSelect: function (textVale, inst) { //選中時觸發事件 44 console.log("我被選中了....."); 45 }, 46 onClose: function (textVale, inst) { //插件效果退出時執行 inst:表示點擊的狀態反饋：set/cancel 47 console.log("textVale--" + textVale); 48 console.log(this.id);//this表示調用該插件的對象 49 } 50 51 //wheels:[[11,12,13],[21,22,23],[01,02,03]],// 當前你定義的數組(即要滾動的數組), 52 //defaultValue: [12,22]//默認顯示當前滾動到哪個值, 53 // formatResult://滾動到某個值后執行某個方法 54 // function(){ 55 // console.log(1); 56 // } 57 } 58 59 //面板顯示日期 60 $("#input").mobiscroll().date(option); 61 62 //面板顯示時間 63 // $("#input").mobiscroll().time(option); 64 65 $("#clear").click(function () { 66 $("#input").mobiscroll("clear"); 67 return false; 68 }); 69 70 $("#show").click(function () { 71 $("#input").mobiscroll("show"); 72 return false; 73 }); 74 }); 75 </script> 76 </body> 77 78 </html>