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