手机日期插件mobiscroll奇巧淫技&mobiscroll 中文API
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.****.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!
温馨提示:强烈建议使用:https://github.com/zhoushengmufc/iosselect
不建议使用
demo下载链接:http://download.****.net/detail/cometwo/9376336
mobiscroll 扩展:http://download.****.net/detail/cometwo/9376397
上一个国产轻量级的:http://download.****.net/detail/cometwo/9394560
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>手机时间选择</title> <meta content="initial-scale=1.0,maximum-scale=1.0,width=device-width" name="viewport"> <meta name="apple-touch-fullscreen" content="YES"> <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta http-equiv="Expires" content="-1"> <meta http-equiv="pragram" content="no-cache"> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/common.css" /> <link rel="stylesheet" href="css/info_self.css" /> <script src="js/jquery-1.11.1.min.js"></script> <!--手机日期--> <script src="js/mobiscroll.core-2.5.2.js" type="text/javascript"></script> <script src="js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script> <link href="css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" /> <link href="css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" /> <script src="js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script> <script src="js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script> <!-- S 可根据自己喜好引入样式风格文件 --> <script src="js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script> <link href="css/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" /> </head> <script type="text/javascript"> $(function() { var currYear = (new Date()).getFullYear(); var opt = {}; opt.datetime = { preset: 'datetime' }; opt.default = { theme: 'android-ics light', //皮肤样式 display: 'modal', //显示方式 :modal(正*) bottom(底部) mode: 'scroller', //日期选择模式 lang: 'zh', startYear: currYear - 5, //开始年份currYear-5不起作用的原因是加了minDate: new Date() endYear: currYear + 5, //结束年份 //minDate: new Date() //加上这句话会导致startYear:currYear-5失效,去掉就可以**startYear:currYear-5, }; $("#appDate").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default'])); var optDateTime = $.extend(opt['datetime'], opt['default']); $("#appDateTime1").mobiscroll(optDateTime).datetime(optDateTime); }); </script> <body> <h1>之所以可以显示上下午是修改了源文件mobiscroll.datetime-2.5.1-zh.js</h1> <dd class="info_list mt10"> <span class="inDis lable_tit" style="color: red;font-size: 25px;">时间选择</span> <div class="inDis input_w"> <input type="text" required name="VisitTime" id="appDateTime1" class="select_w" /> <i class="red">*</i> </div> </dd> <h2>修改后的文件</h2> <pre> (function ($) { $.mobiscroll.i18n.zh = $.extend($.mobiscroll.i18n.zh, { dateFormat: 'yyyy-mm-dd', dateOrder: 'yymmdd', dayNames: ['周日', '周一;', '周二;', '周三', '周四', '周五', '周六'], dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'], dayText: '日', hourText: '时', minuteText: '分', monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], monthText: '月', secText: '秒', timeFormat: 'HH:ii', timeWheels: 'HHii', yearText: '年', ampmText:'上午/下午', timeFormat: 'A', timeWheels: 'A' });})(jQuery); </pre> <h2>未修改的文件</h2> <pre>(function ($) { $.mobiscroll.i18n.zh = $.extend($.mobiscroll.i18n.zh, { dateFormat: 'yyyy-mm-dd', dateOrder: 'yymmdd', dayNames: ['周日', '周一;', '周二;', '周三', '周四', '周五', '周六'], dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'], dayText: '日', hourText: '时', minuteText: '分', monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], monthText: '月', secText: '秒', timeFormat: 'HH:ii', timeWheels: 'HHii', yearText: '年' });})(jQuery); </pre> <h2>mobiscroll简单配置参数</h2> <pre> //下面注释部分是上面的参数可以替换改变它的样式 //希望一起研究插件的朋友加我个人QQ:1010305129也可以,本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。 // 直接写参数方法 //$("#scroller").mobiscroll(opt).date(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' }); //具体参数定义如下 //{ //preset: 'date', //日期类型--datatime --time, //theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】 //【wp light】【wp】 //mode: "scroller",//操作方式【scroller】【clickpick】【mixed】 //display: 'bubble', //显示方【modal】【inline】【bubble】【top】【bottom】 //dateFormat: 'yyyy-mm-dd', // 日期格式 //setText: '确定', //确认按钮名称 //cancelText: '清空',//取消按钮名籍我 //dateOrder: 'yymmdd', //面板中日期排列格 //dayText: '日', //monthText: '月', //yearText: '年', //面板中年月日文字 //startYear: (new Date()).getFullYear(), //开始年份 //endYear: (new Date()).getFullYear() + 9, //结束年份 //showNow: true, //nowText: "明天", // //showOnFocus: false, //height: 45, //width: 90, //rows: 3, //minDate: new Date() 从当前年,当前月,当前日开始} </pre> </body></html>
- 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
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
配置API
//下面注释部分是上面的参数可以替换改变它的样式 //希望一起研究插件的朋友加我个人QQ:1010305129也可以,本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。 // 直接写参数方法 //$("#scroller").mobiscroll(opt).date(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' }); //具体参数定义如下 //{ //preset: 'date', //日期类型--datatime --time, //theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】 //【wp light】【wp】 //mode: "scroller",//操作方式【scroller】【clickpick】【mixed】 //display: 'bubble', //显示方【modal】【inline】【bubble】【top】【bottom】 //dateFormat: 'yyyy-mm-dd', // 日期格式 //setText: '确定', //确认按钮名称 //cancelText: '清空',//取消按钮名籍我 //dateOrder: 'yymmdd', //面板中日期排列格 //dayText: '日', //monthText: '月', //yearText: '年', //面板中年月日文字 //startYear: (new Date()).getFullYear(), //开始年份 //endYear: (new Date()).getFullYear() + 9, //结束年份 //showNow: true, //nowText: "明天", // //showOnFocus: false, //height: 45, //width: 90, //rows: 3, //minDate: new Date() 从当前年,当前月,当前日开始}
- 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
给我老师的人工智能教程打call!http://blog.****.net/jiangjunshow
温馨提示:强烈建议使用:https://github.com/zhoushengmufc/iosselect
不建议使用
demo下载链接:http://download.****.net/detail/cometwo/9376336
mobiscroll 扩展:http://download.****.net/detail/cometwo/9376397
上一个国产轻量级的:http://download.****.net/detail/cometwo/9394560
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>手机时间选择</title> <meta content="initial-scale=1.0,maximum-scale=1.0,width=device-width" name="viewport"> <meta name="apple-touch-fullscreen" content="YES"> <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta http-equiv="Expires" content="-1"> <meta http-equiv="pragram" content="no-cache"> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/common.css" /> <link rel="stylesheet" href="css/info_self.css" /> <script src="js/jquery-1.11.1.min.js"></script> <!--手机日期--> <script src="js/mobiscroll.core-2.5.2.js" type="text/javascript"></script> <script src="js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script> <link href="css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" /> <link href="css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" /> <script src="js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script> <script src="js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script> <!-- S 可根据自己喜好引入样式风格文件 --> <script src="js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script> <link href="css/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" /> </head> <script type="text/javascript"> $(function() { var currYear = (new Date()).getFullYear(); var opt = {}; opt.datetime = { preset: 'datetime' }; opt.default = { theme: 'android-ics light', //皮肤样式 display: 'modal', //显示方式 :modal(正*) bottom(底部) mode: 'scroller', //日期选择模式 lang: 'zh', startYear: currYear - 5, //开始年份currYear-5不起作用的原因是加了minDate: new Date() endYear: currYear + 5, //结束年份 //minDate: new Date() //加上这句话会导致startYear:currYear-5失效,去掉就可以**startYear:currYear-5, }; $("#appDate").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default'])); var optDateTime = $.extend(opt['datetime'], opt['default']); $("#appDateTime1").mobiscroll(optDateTime).datetime(optDateTime); }); </script> <body> <h1>之所以可以显示上下午是修改了源文件mobiscroll.datetime-2.5.1-zh.js</h1> <dd class="info_list mt10"> <span class="inDis lable_tit" style="color: red;font-size: 25px;">时间选择</span> <div class="inDis input_w"> <input type="text" required name="VisitTime" id="appDateTime1" class="select_w" /> <i class="red">*</i> </div> </dd> <h2>修改后的文件</h2> <pre> (function ($) { $.mobiscroll.i18n.zh = $.extend($.mobiscroll.i18n.zh, { dateFormat: 'yyyy-mm-dd', dateOrder: 'yymmdd', dayNames: ['周日', '周一;', '周二;', '周三', '周四', '周五', '周六'], dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'], dayText: '日', hourText: '时', minuteText: '分', monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], monthText: '月', secText: '秒', timeFormat: 'HH:ii', timeWheels: 'HHii', yearText: '年', ampmText:'上午/下午', timeFormat: 'A', timeWheels: 'A' });})(jQuery); </pre> <h2>未修改的文件</h2> <pre>(function ($) { $.mobiscroll.i18n.zh = $.extend($.mobiscroll.i18n.zh, { dateFormat: 'yyyy-mm-dd', dateOrder: 'yymmdd', dayNames: ['周日', '周一;', '周二;', '周三', '周四', '周五', '周六'], dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'], dayText: '日', hourText: '时', minuteText: '分', monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], monthText: '月', secText: '秒', timeFormat: 'HH:ii', timeWheels: 'HHii', yearText: '年' });})(jQuery); </pre> <h2>mobiscroll简单配置参数</h2> <pre> //下面注释部分是上面的参数可以替换改变它的样式 //希望一起研究插件的朋友加我个人QQ:1010305129也可以,本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。 // 直接写参数方法 //$("#scroller").mobiscroll(opt).date(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' }); //具体参数定义如下 //{ //preset: 'date', //日期类型--datatime --time, //theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】 //【wp light】【wp】 //mode: "scroller",//操作方式【scroller】【clickpick】【mixed】 //display: 'bubble', //显示方【modal】【inline】【bubble】【top】【bottom】 //dateFormat: 'yyyy-mm-dd', // 日期格式 //setText: '确定', //确认按钮名称 //cancelText: '清空',//取消按钮名籍我 //dateOrder: 'yymmdd', //面板中日期排列格 //dayText: '日', //monthText: '月', //yearText: '年', //面板中年月日文字 //startYear: (new Date()).getFullYear(), //开始年份 //endYear: (new Date()).getFullYear() + 9, //结束年份 //showNow: true, //nowText: "明天", // //showOnFocus: false, //height: 45, //width: 90, //rows: 3, //minDate: new Date() 从当前年,当前月,当前日开始} </pre> </body></html>
- 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
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
配置API
//下面注释部分是上面的参数可以替换改变它的样式 //希望一起研究插件的朋友加我个人QQ:1010305129也可以,本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。 // 直接写参数方法 //$("#scroller").mobiscroll(opt).date(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' }); //具体参数定义如下 //{ //preset: 'date', //日期类型--datatime --time, //theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】 //【wp light】【wp】 //mode: "scroller",//操作方式【scroller】【clickpick】【mixed】 //display: 'bubble', //显示方【modal】【inline】【bubble】【top】【bottom】 //dateFormat: 'yyyy-mm-dd', // 日期格式 //setText: '确定', //确认按钮名称 //cancelText: '清空',//取消按钮名籍我 //dateOrder: 'yymmdd', //面板中日期排列格 //dayText: '日', //monthText: '月', //yearText: '年', //面板中年月日文字 //startYear: (new Date()).getFullYear(), //开始年份 //endYear: (new Date()).getFullYear() + 9, //结束年份 //showNow: true, //nowText: "明天", // //showOnFocus: false, //height: 45, //width: 90, //rows: 3, //minDate: new Date() 从当前年,当前月,当前日开始}
- 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