前一阵子接触到了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>