1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!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 >
 
     <!-- jQuery Include -->
     < script  src = "dist/js/jquery-1.11.3.min.js" ></ script >
 
     <!-- Mobiscroll JS and CSS Includes -->
 
     < script  src = "dist/js/mobiscroll.custom.min.js" ></ script >
 
 
     < link  href = "dist/css/mobiscroll.custom.min.css"  rel = "stylesheet"  type = "text/css"  />
 
 
 
     < style >
         .section{
             position:relative;
             height:32px;
             padding-left:80px;
             padding-right:15px;
             margin-bottom:10px;
             box-sizing: border-box;
         }
         .section label{
             position:absolute;
             left:0;
             top:0;
             bottom:0;
             height:32px;
             line-height: 32px;;
             font-size:12px;
         }
 
         .section>select,
         .section>input{
             width:100%;
             height:100%;
             display:block;
             padding:0 10px;
             box-sizing: border-box;
         }
     </ style >
 
</ head >
 
< body >
 
     <!-- Select demo markup -->
     < div  class = "section" >
         < label >选择控件</ label >
         < select  id = "demo_select" >
             < option  value = "" >Please Select</ option >
             < option  value = "1" >Atlanta</ option >
             < option  value = "2" >Berlin</ option >
             < option  value = "3" >Boston</ option >
             < option  value = "4" >Chicago</ option >
             < option  value = "5" >London</ option >
             < option  value = "6" >Los Angeles</ option >
             < option  value = "7" >New York</ option >
             < option  value = "8" >Paris</ option >
             < option  value = "9" >San Francisco</ option >
         </ select >
     </ div >
 
     <!-- Date demo markup -->
     < div  class = "section" >
         < label >日期控件</ label >
         < input  type = "text"  id = "demo_date"  />
     </ div >
 
     <!-- Date & Time demo markup -->
     < div  class = "section" >
         < label >日期时间控件</ label >
         < input  type = "text"  id = "demo_datetime"  />
     </ div >
 
     <!-- Time demo markup -->
     < div  class = "section" >
         < label >时间控件</ label >
         < input  type = "text"  id = "demo_time"  />
     </ div >
 
 
     < script >
 
         var theme = "ios";
         var mode = "scroller";
         var display = "bottom";
         var lang="zh";
 
 
         // Select demo initialization
         $('#demo_select').mobiscroll().select({
             theme: theme,     // Specify theme like: theme: 'ios' or omit setting to use default
             mode: mode,       // Specify scroller mode like: mode: 'mixed' or omit setting to use default
             display: display, // Specify display mode like: display: 'bottom' or omit setting to use default
             lang: lang        // Specify language like: lang: 'pl' or omit setting to use default
         });
 
         // Date demo initialization
         $('#demo_date').mobiscroll().date({
             theme: theme,     // Specify theme like: theme: 'ios' or omit setting to use default
             mode: mode,       // Specify scroller mode like: mode: 'mixed' or omit setting to use default
             display: display, // Specify display mode like: display: 'bottom' or omit setting to use default
             lang: lang        // Specify language like: lang: 'pl' or omit setting to use default
         });
 
         // Date & Time demo initialization
         $('#demo_datetime').mobiscroll().datetime({
             theme: theme,     // Specify theme like: theme: 'ios' or omit setting to use default
             mode: mode,       // Specify scroller mode like: mode: 'mixed' or omit setting to use default
             display: display, // Specify display mode like: display: 'bottom' or omit setting to use default
             lang: lang,       // Specify language like: lang: 'pl' or omit setting to use default
             dateFormat:"yyyy-mm-dd", //
             minDate: new Date(2012,3,10,9,22),  // More info about minDate: http://docs.mobiscroll.com/2-14-0/datetime#!opt-minDate
             maxDate: new Date(2014,7,30,15,44),   // More info about maxDate: http://docs.mobiscroll.com/2-14-0/datetime#!opt-maxDate
             stepMinute: 5  // More info about stepMinute: http://docs.mobiscroll.com/2-14-0/datetime#!opt-stepMinute
         });
 
         // Time demo initialization
         $('#demo_time').mobiscroll().time({
             theme: theme,     // Specify theme like: theme: 'ios' or omit setting to use default
             mode: mode,       // Specify scroller mode like: mode: 'mixed' or omit setting to use default
             display: display, // Specify display mode like: display: 'bottom' or omit setting to use default
             lang: lang        // Specify language like: lang: 'pl' or omit setting to use default
         });
     </ script >
 
 
</ body >
</ html >

wKioL1laD1az9g4iAAhriD4Zytg712.jpg


wKiom1laD3ri9pKJAAh4PLjIyCg903.jpg