移动端日期选择插件
来源：互联网 发布：淘宝店铺手机能激活吗 编辑：程序博客网 时间：2024/05/20 02:30
移动端的日期选择插件相比PC端比较少，主要原因是不同手机浏览器的效果不一样，mobiscroll 太臃肿了，而且不是免费的，一个字：丑
在此向大家分享一款手机端的日期选择插件https://github.com/xfhxbb/lCalendar，特此向这位雷锋敬意，另一个是移动端 城市 选择插件http://blog.csdn.net/libin_1/article/details/50689075
或者看看http://blog.csdn.net/libin_1/article/details/50400941
QQ 浏览器：
原版的效果 下载地址http://download.csdn.net/detail/cometwo/9436022
不过有时候需要时分秒，特此在原基础上小小改动一下，下载地址http://download.csdn.net/detail/cometwo/9437826
小米note 自带浏览器测试
源码：
<!Doctype html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <meta http-equiv="refresh" content="100"> <title>lCalendar纯原生js日期时间选择</title> <script src="js/lCalendar.js"></script> <link rel="stylesheet" href="css/lCalendar.css"> <style type="text/css"> * { margin: 0; padding: 0; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; box-sizing: border-box; } html, body { margin: 0 auto; width: 100%; min-height: 100%; overflow-x: hidden; -webkit-user-select: none; } body { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } h1 { background-color: #19b5ee; color: #fff; font-size: 25px; text-align: center; padding: 10px; } input { width: 90%; height: 40px; font-size: 18px; border: 1px solid #19b5ee; border-radius: 5px; margin: 20px 5% 0 5%; padding: 5px; } </style> </head> <body> <h1>lCalendar纯原生js日期时间选择</h1> <div> <input id="demo1" type="text" readonly="" name="input_date" placeholder="日期选择特效" data-lcalendar="2011-01-1,2019-12-31" /> </div> <div> <input id="demo2" type="text" readonly="" name="input_date" placeholder="日期和时间选择特效" data-lcalendar="2010-01-11,2019-12-31" /> </div> <div> <input id="demo3" type="text" readonly="" name="input_date" placeholder="时间选择特效" /> </div> <br /> <h1>原生时间对象</h1> <div> <input type="date" name="input_date" placeholder="时间选择特效" /> <input type="datetime" name="input_date" placeholder="时间选择特效" /> <input type="datetime-local" name="input_date" placeholder="时间选择特效" /> </div> <script> var calendar = new lCalendar(); calendar.init({ 'trigger': '#demo1', 'type': 'date' }); var calendardatetime = new lCalendar(); calendardatetime.init({ 'trigger': '#demo2', 'type': 'datetime' }); var calendartime = new lCalendar(); calendartime.init({ 'trigger': '#demo3', 'type': 'time' }); </script> </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
- 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
CSS文件：
.gearDate,.gearDatetime,.gearTime { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 10px; background-color: rgba(0, 0, 0, 0.2); display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9900; overflow: hidden; -webkit-animation-fill-mode: both; animation-fill-mode: both}.date_ctrl { vertical-align: middle; background-color: white; color: #363837; margin: 0; height: auto; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 9901; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)}.slideInUp { animation: slideInUp .3s ease-in; -webkit-animation: slideInUp .3s ease-in}@-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }}.date_roll,.datetime_roll,.time_roll { display: -webkit-box; width: 100%; height: auto; overflow: hidden; font-weight: bold; background-color: transparent; -webkit-mask: -webkit-gradient(linear, 0% 50%, 0% 100%, from(#debb47), to(rgba(36, 142, 36, 0))); -webkit-mask: -webkit-linear-gradient(top, #debb47 50%, rgba(36, 142, 36, 0))}.date_roll>div,.datetime_roll>div,.time_roll>div { font-size: 2.3em; height: 6em; float: left; background-color: transparent; position: relative; overflow: hidden; -webkit-box-flex: 4}.date_roll_mask { -webkit-mask: -webkit-gradient(linear, 0% 40%, 0% 0%, from(#debb47), to(rgba(36, 142, 36, 0))); -webkit-mask: -webkit-linear-gradient(bottom, #debb47 50%, rgba(36, 142, 36, 0)); padding: 0 0 3em 0}.date_roll>div:nth-child(2) { -webkit-box-flex: 2}.date_roll>div:nth-child(1),.datetime_roll>div:nth-child(1) { -webkit-box-flex: 4}.datetime_roll>div:first-child { -webkit-box-flex: 6}.datetime_roll>div:last-child { -webkit-box-flex: 6}.date_grid { position: relative; top: 2em; width: 100%; height: 2em; margin: 0; box-sizing: border-box; z-index: 0; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6}.date_grid>div { color: #000; position: absolute; right: 0; top: 0; font-size: .8em; line-height: 2.5em}.date_roll>div:nth-child(3) .date_grid>div { left: 42%}.datetime_roll>div .date_grid>div { right: 0}.datetime_roll>div:first-child .date_grid>div { left: auto; right: 0%}.datetime_roll>div:last-child .date_grid>div { left: 50%}.time_roll>div:nth-child(1) .date_grid>div { right: 0.5em; /*border: 1px solid red;*/}.time_roll>div .date_grid{ /*border: 1px solid black;*/} .time_roll>div .date_grid>div { right:1em; /*border: 1px solid blue;*/}.date_btn { color: #000; font-size: 1.6em; line-height: 1em; text-align: center; padding: .8em 1em; cursor: pointer}.date_btn_box { display: -webkit-box; -webkit-box-pack: justify; -webkit-box-align: stretch}.gear { float: left; position: absolute; z-index: 9902; width: 5.5em; margin-top: -6em}.date_roll>div .gear { width: 100%}.date_roll>div:nth-child(1) .gear { text-indent: 20%}.date_roll>div:nth-child(2) .gear { text-indent: -20%}.date_roll>div:nth-child(3) .gear { text-indent: -55%}.datetime_roll>div .gear { width: 100%; text-indent: -25%}.datetime_roll>div:first-child .gear { text-indent: -10%}.datetime_roll>div:last-child .gear { text-indent: -50%}.time_roll>div .gear { width: 100%; /*text-indent: -70%;*/ text-align: center;}.time_roll>div:nth-child(1) .gear { width: 100%; text-indent: 10%}.tooth { height: 2em; line-height: 2em; text-align: center}- 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
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 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
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
lCalendar.js 修改后的文件
/* * lCalendar日期控件 * * 作者：黄磊 * * 邮箱：xfhxbb@yeah.net * * Copyright 2016 * * 创建于：2016-01-08 */window.lCalendar = (function() { var MobileCalendar = function() { this.gearDate; this.minY = 1900; this.minM = 1, this.minD = 1, this.maxY = 2099, this.maxM = 12, this.maxD = 31 } MobileCalendar.prototype = { init: function(params) { this.type = params.type; this.trigger = document.querySelector(params.trigger); if (this.trigger.getAttribute("data-lcalendar") != null) { var arr = this.trigger.getAttribute("data-lcalendar").split(','); var minArr = arr[0].split('-'); this.minY = ~~minArr[0]; this.minM = ~~minArr[1]; this.minD = ~~minArr[2]; var maxArr = arr[1].split('-'); this.maxY = ~~maxArr[0]; this.maxM = ~~maxArr[1]; this.maxD = ~~maxArr[2]; } this.bindEvent(this.type); }, bindEvent: function(type) { var _self = this; //呼出日期插件 function popupDate(e) { _self.gearDate = document.createElement("div"); _self.gearDate.className = "gearDate"; _self.gearDate.innerHTML = '<div class="date_ctrl slideInUp">' + '<div class="date_btn_box">' + '<div class="date_btn lcalendar_cancel">取消</div>' + '<div class="date_btn lcalendar_finish">确定</div>' + '</div>' + '<div class="date_roll_mask">' + '<div class="date_roll">' + '<div>' + '<div class="gear date_yy" data-datetype="date_yy"></div>' + '<div class="date_grid">' + '<div>年</div>' + '</div>' + '</div>' + '<div>' + '<div class="gear date_mm" data-datetype="date_mm"></div>' + '<div class="date_grid">' + '<div>月</div>' + '</div>' + '</div>' + '<div>' + '<div class="gear date_dd" data-datetype="date_dd"></div>' + '<div class="date_grid">' + '<div>日</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>'; document.body.appendChild(_self.gearDate); dateCtrlInit(); var lcalendar_cancel = _self.gearDate.querySelector(".lcalendar_cancel"); lcalendar_cancel.addEventListener('touchstart', closeMobileCalendar); var lcalendar_finish = _self.gearDate.querySelector(".lcalendar_finish"); lcalendar_finish.addEventListener('touchstart', finishMobileDate); var date_yy = _self.gearDate.querySelector(".date_yy"); var date_mm = _self.gearDate.querySelector(".date_mm"); var date_dd = _self.gearDate.querySelector(".date_dd"); date_yy.addEventListener('touchstart', gearTouchStart); date_mm.addEventListener('touchstart', gearTouchStart); date_dd.addEventListener('touchstart', gearTouchStart); date_yy.addEventListener('touchmove', gearTouchMove); date_mm.addEventListener('touchmove', gearTouchMove); date_dd.addEventListener('touchmove', gearTouchMove); date_yy.addEventListener('touchend', gearTouchEnd); date_mm.addEventListener('touchend', gearTouchEnd); date_dd.addEventListener('touchend', gearTouchEnd); } //初始化年月日插件默认值 function dateCtrlInit() { var date = new Date(); var dateArr = { yy: date.getYear(), mm: date.getMonth(), dd: date.getDate() - 1 }; if (/^\d{4}-\d{1,2}-\d{1,2}$/.test(_self.trigger.value)) { rs = _self.trigger.value.match(/(^|-)\d{1,4}/g); dateArr.yy = rs[0] - _self.minY; dateArr.mm = rs[1].replace(/-/g, "") - 1; dateArr.dd = rs[2].replace(/-/g, "") - 1; } else { dateArr.yy = dateArr.yy + 1900 - _self.minY; } _self.gearDate.querySelector(".date_yy").setAttribute("val", dateArr.yy); _self.gearDate.querySelector(".date_mm").setAttribute("val", dateArr.mm); _self.gearDate.querySelector(".date_dd").setAttribute("val", dateArr.dd); setDateGearTooth(); } //呼出日期+时间插件 function popupDateTime(e) { _self.gearDate = document.createElement("div"); _self.gearDate.className = "gearDatetime"; _self.gearDate.innerHTML = '<div class="date_ctrl slideInUp">' + '<div class="date_btn_box">' + '<div class="date_btn lcalendar_cancel">取消</div>' + '<div class="date_btn lcalendar_finish">确定</div>' + '</div>' + '<div class="date_roll_mask">' + '<div class="datetime_roll">' + '<div>' + '<div class="gear date_yy" data-datetype="date_yy"></div>' + '<div class="date_grid">' + '<div>年</div>' + '</div>' + '</div>' + '<div>' + '<div class="gear date_mm" data-datetype="date_mm"></div>' + '<div class="date_grid">' + '<div>月</div>' + '</div>' + '</div>' + '<div>' + '<div class="gear date_dd" data-datetype="date_dd"></div>' + '<div class="date_grid">' + '<div>日</div>' + '</div>' + '</div>' + '<div>' + '<div class="gear time_hh" data-datetype="time_hh"></div>' + '<div class="date_grid">' + '<div>时</div>' + '</div>' + '</div>' + '<div>' + '<div class="gear time_mm" data-datetype="time_mm"></div>' + '<div class="date_grid">' + '<div>分</div>' + '</div>' + '</div>' + '</div>' + //date_roll '</div>' + //date_roll_mask '</div>'; document.body.appendChild(_self.gearDate); dateTimeCtrlInit(); var lcalendar_cancel = _self.gearDate.querySelector(".lcalendar_cancel"); lcalendar_cancel.addEventListener('touchstart', closeMobileCalendar); var lcalendar_finish = _self.gearDate.querySelector(".lcalendar_finish"); lcalendar_finish.addEventListener('touchstart', finishMobileDateTime); var date_yy = _self.gearDate.querySelector(".date_yy"); var date_mm = _self.gearDate.querySelector(".date_mm"); var date_dd = _self.gearDate.querySelector(".date_dd"); var time_hh = _self.gearDate.querySelector(".time_hh"); var time_mm = _self.gearDate.querySelector(".time_mm"); date_yy.addEventListener('touchstart', gearTouchStart); date_mm.addEventListener('touchstart', gearTouchStart); date_dd.addEventListener('touchstart', gearTouchStart); time_hh.addEventListener('touchstart', gearTouchStart); time_mm.addEventListener('touchstart', gearTouchStart); date_yy.addEventListener('touchmove', gearTouchMove); date_mm.addEventListener('touchmove', gearTouchMove); date_dd.addEventListener('touchmove', gearTouchMove); time_hh.addEventListener('touchmove', gearTouchMove); time_mm.addEventListener('touchmove', gearTouchMove); date_yy.addEventListener('touchend', gearTouchEnd); date_mm.addEventListener('touchend', gearTouchEnd); date_dd.addEventListener('touchend', gearTouchEnd); time_hh.addEventListener('touchend', gearTouchEnd); time_mm.addEventListener('touchend', gearTouchEnd); } //初始化年月日时分插件默认值 function dateTimeCtrlInit() { var date = new Date(); var dateArr = { yy: date.getYear(), mm: date.getMonth(), dd: date.getDate() - 1, hh: date.getHours(), mi: date.getMinutes() }; if (/^\d{4}-\d{1,2}-\d{1,2}\s\d{2}:\d{2}$/.test(_self.trigger.value)) { rs = _self.trigger.value.match(/(^|-|\s|:)\d{1,4}/g); dateArr.yy = rs[0] - _self.minY; dateArr.mm = rs[1].replace(/-/g, "") - 1; dateArr.dd = rs[2].replace(/-/g, "") - 1; dateArr.hh = parseInt(rs[3].replace(/\s0?/g, "")); dateArr.mi = parseInt(rs[4].replace(/:0?/g, "")); } else { dateArr.yy = dateArr.yy + 1900 - _self.minY; } _self.gearDate.querySelector(".date_yy").setAttribute("val", dateArr.yy); _self.gearDate.querySelector(".date_mm").setAttribute("val", dateArr.mm); _self.gearDate.querySelector(".date_dd").setAttribute("val", dateArr.dd); setDateGearTooth(); _self.gearDate.querySelector(".time_hh").setAttribute("val", dateArr.hh); _self.gearDate.querySelector(".time_mm").setAttribute("val", dateArr.mi); setTimeGearTooth(); } //呼出时间插件 function popupTime(e) { _self.gearDate = document.createElement("div"); _self.gearDate.className = "gearDate"; _self.gearDate.innerHTML = '<div class="date_ctrl slideInUp">' + '<div class="date_btn_box">' + '<div class="date_btn lcalendar_cancel">取消</div>' + '<div class="date_btn lcalendar_finish">确定</div>' + '</div>' + '<div class="date_roll_mask">' + '<div class="time_roll">' + '<div>' + '<div class="gear time_hh" data-datetype="time_hh"></div>' + '<div class="date_grid">' + '<div>时</div>' + '</div>' + '</div>' + '<div>' + '<div class="gear time_mm" data-datetype="time_mm"></div>' + '<div class="date_grid">' + '<div>分</div>' + '</div>' + '</div>' + '<div>' + '<div class="gear time_ss" data-datetype="time_ss"></div>' + '<div class="date_grid">' + '<div>秒</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>'; document.body.appendChild(_self.gearDate); timeCtrlInit(); var lcalendar_cancel = _self.gearDate.querySelector(".lcalendar_cancel"); lcalendar_cancel.addEventListener('touchstart', closeMobileCalendar); var lcalendar_finish = _self.gearDate.querySelector(".lcalendar_finish"); lcalendar_finish.addEventListener('touchstart', finishMobileTime); var time_hh = _self.gearDate.querySelector(".time_hh"); var time_mm = _self.gearDate.querySelector(".time_mm"); var time_ss = _self.gearDate.querySelector(".time_ss"); time_hh.addEventListener('touchstart', gearTouchStart); time_mm.addEventListener('touchstart', gearTouchStart); time_ss.addEventListener('touchstart', gearTouchStart); time_hh.addEventListener('touchmove', gearTouchMove); time_mm.addEventListener('touchmove', gearTouchMove); time_ss.addEventListener('touchmove', gearTouchMove); time_hh.addEventListener('touchend', gearTouchEnd); time_mm.addEventListener('touchend', gearTouchEnd); time_ss.addEventListener('touchend', gearTouchEnd); } //初始化时分插件默认值 function timeCtrlInit() { var d = new Date(); var e = { hh: d.getHours(), mm: d.getMinutes(), ss: d.getSeconds() }; if (/^\d{2}:\d{2}:\d{2}$/.test(_self.trigger.value)) { rs = _self.trigger.value.match(/(^|:)\d{2}/g); e.hh = parseInt(rs[0].replace(/^0?/g, "")); e.mm = parseInt(rs[1].replace(/:0?/g, "")); e.ss = parseInt(rs[2].replace(/:0?/g, "")); } //alert(e.ss); 测试用 _self.gearDate.querySelector(".time_hh").setAttribute("val", e.hh); _self.gearDate.querySelector(".time_mm").setAttribute("val", e.mm); _self.gearDate.querySelector(".time_ss").setAttribute("val", e.ss); setTimeGearTooth(); } //重置日期节点个数 function setDateGearTooth() { var passY = _self.maxY - _self.minY + 1; var date_yy = _self.gearDate.querySelector(".date_yy"); var itemStr = ""; if (date_yy && date_yy.getAttribute("val")) { //得到年份的值 var yyVal = parseInt(date_yy.getAttribute("val")); //p 当前节点前后需要展示的节点个数 for (var p = 0; p <= passY - 1; p++) { itemStr += "<div class='tooth'>" + (_self.minY + p) + "</div>"; } date_yy.innerHTML = itemStr; var top = Math.floor(parseFloat(date_yy.getAttribute('top'))); if (!isNaN(top)) { top % 2 == 0 ? (top = top) : (top = top + 1); top > 8 && (top = 8); var minTop = 8 - (passY - 1) * 2; top < minTop && (top = minTop); date_yy.style["-webkit-transform"] = 'translate3d(0,' + top + 'em,0)'; date_yy.setAttribute('top', top + 'em'); yyVal = Math.abs(top - 8) / 2; date_yy.setAttribute("val", yyVal); } else { date_yy.style["-webkit-transform"] = 'translate3d(0,' + (8 - yyVal * 2) + 'em,0)'; date_yy.setAttribute('top', 8 - yyVal * 2 + 'em'); } } else { return; } var date_mm = _self.gearDate.querySelector(".date_mm"); if (date_mm && date_mm.getAttribute("val")) { itemStr = ""; //得到月份的值 var mmVal = parseInt(date_mm.getAttribute("val")); var maxM = 11; var minM = 0; //当年份到达最大值 if (yyVal == passY - 1) { maxM = _self.maxM - 1; } //当年份到达最小值 if (yyVal == 0) { minM = _self.minM - 1; } //p 当前节点前后需要展示的节点个数 for (var p = 0; p < maxM - minM + 1; p++) { itemStr += "<div class='tooth'>" + (minM + p + 1) + "</div>"; } date_mm.innerHTML = itemStr; if (mmVal > maxM) { mmVal = maxM; date_mm.setAttribute("val", mmVal); } else if (mmVal < minM) { mmVal = maxM; date_mm.setAttribute("val", mmVal); } date_mm.style["-webkit-transform"] = 'translate3d(0,' + (8 - (mmVal - minM) * 2) + 'em,0)'; date_mm.setAttribute('top', 8 - (mmVal - minM) * 2 + 'em'); } else { return; } var date_dd = _self.gearDate.querySelector(".date_dd"); if (date_dd && date_dd.getAttribute("val")) { itemStr = ""; //得到日期的值 var ddVal = parseInt(date_dd.getAttribute("val")); //返回月份的天数 var maxMonthDays = calcDays(yyVal, mmVal); //p 当前节点前后需要展示的节点个数 var maxD = maxMonthDays - 1; var minD = 0; //当年份月份到达最大值 if (yyVal == passY - 1 && _self.maxM == mmVal + 1) { maxD = _self.maxD - 1; } //当年、月到达最小值 if (yyVal == 0 && _self.minM == mmVal + 1) { minD = _self.minD - 1; } for (var p = 0; p < maxD - minD + 1; p++) { itemStr += "<div class='tooth'>" + (minD + p + 1) + "</div>"; } date_dd.innerHTML = itemStr; if (ddVal > maxD) { ddVal = maxD; date_dd.setAttribute("val", ddVal); } else if (ddVal < minD) { ddVal = minD; date_dd.setAttribute("val", ddVal); } date_dd.style["-webkit-transform"] = 'translate3d(0,' + (8 - (ddVal - minD) * 2) + 'em,0)'; date_dd.setAttribute('top', 8 - (ddVal - minD) * 2 + 'em'); } else { return; } } //重置时间节点个数 function setTimeGearTooth() { var time_hh = _self.gearDate.querySelector(".time_hh"); if (time_hh && time_hh.getAttribute("val")) { var i = ""; var hhVal = parseInt(time_hh.getAttribute("val")); for (var g = 0; g <= 23; g++) { i += "<div class='tooth'>" + g + "</div>"; } time_hh.innerHTML = i; time_hh.style["-webkit-transform"] = 'translate3d(0,' + (8 - hhVal * 2) + 'em,0)'; time_hh.setAttribute('top', 8 - hhVal * 2 + 'em'); } else { return } var time_mm = _self.gearDate.querySelector(".time_mm"); if (time_mm && time_mm.getAttribute("val")) { var i = ""; var mmVal = parseInt(time_mm.getAttribute("val")); for (var g = 0; g <= 59; g++) { i += "<div class='tooth'>" + g + "</div>"; } time_mm.innerHTML = i; time_mm.style["-webkit-transform"] = 'translate3d(0,' + (8 - mmVal * 2) + 'em,0)'; time_mm.setAttribute('top', 8 - mmVal * 2 + 'em'); } else { return } var time_ss = _self.gearDate.querySelector(".time_ss"); if (time_ss && time_ss.getAttribute("val")) { var i = ""; var mmVal = parseInt(time_ss.getAttribute("val")); for (var g = 0; g <= 59; g++) { i += "<div class='tooth'>" + g + "</div>"; } time_ss.innerHTML = i; time_ss.style["-webkit-transform"] = 'translate3d(0,' + (8 - mmVal * 2) + 'em,0)'; time_ss.setAttribute('top', 8 - mmVal * 2 + 'em'); } else { return } } //求月份最大天数 function calcDays(year, month) { if (month == 1) { year += _self.minY; if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0 && year % 4000 != 0)) { return 29; } else { return 28; } } else { if (month == 3 || month == 5 || month == 8 || month == 10) { return 30; } else { return 31; } } } //触摸开始 function gearTouchStart(e) { e.preventDefault(); var target = e.target; while (true) { if (!target.classList.contains("gear")) { target = target.parentElement; } else { break } } clearInterval(target["int_" + target.id]); target["old_" + target.id] = e.targetTouches[0].screenY; target["o_t_" + target.id] = (new Date()).getTime(); var top = target.getAttribute('top'); if (top) { target["o_d_" + target.id] = parseFloat(top.replace(/em/g, "")); } else { target["o_d_" + target.id] = 0; } } //手指移动 function gearTouchMove(e) { e.preventDefault(); var target = e.target; while (true) { if (!target.classList.contains("gear")) { target = target.parentElement; } else { break } } target["new_" + target.id] = e.targetTouches[0].screenY; target["n_t_" + target.id] = (new Date()).getTime(); //var f = (target["new_" + target.id] - target["old_" + target.id]) * 18 / target.clientHeight; var f = (target["new_" + target.id] - target["old_" + target.id]) * 18 / 370; target["pos_" + target.id] = target["o_d_" + target.id] + f; target.style["-webkit-transform"] = 'translate3d(0,' + target["pos_" + target.id] + 'em,0)'; target.setAttribute('top', target["pos_" + target.id] + 'em'); } //离开屏幕 function gearTouchEnd(e) { e.preventDefault(); var target = e.target; while (true) { if (!target.classList.contains("gear")) { target = target.parentElement; } else { break; } } var flag = (target["new_" + target.id] - target["old_" + target.id]) / (target["n_t_" + target.id] - target["o_t_" + target.id]); if (Math.abs(flag) <= 0.2) { target["spd_" + target.id] = (flag < 0 ? -0.08 : 0.08); } else { if (Math.abs(flag) <= 0.5) { target["spd_" + target.id] = (flag < 0 ? -0.16 : 0.16); } else { target["spd_" + target.id] = flag / 2; } } if (!target["pos_" + target.id]) { target["pos_" + target.id] = 0; } rollGear(target); } //缓动效果 function rollGear(target) { var d = 0; var stopGear = false; var passY = _self.maxY - _self.minY + 1; clearInterval(target["int_" + target.id]); target["int_" + target.id] = setInterval(function() { var pos = target["pos_" + target.id]; var speed = target["spd_" + target.id] * Math.exp(-0.03 * d); pos += speed; if (Math.abs(speed) > 0.1) {} else { speed = 0.1; var b = Math.round(pos / 2) * 2; if (Math.abs(pos - b) < 0.02) { stopGear = true; } else { if (pos > b) { pos -= speed } else { pos += speed } } } if (pos > 8) { pos = 8; stopGear = true; } switch (target.dataset.datetype) { case "date_yy": var minTop = 8 - (passY - 1) * 2; if (pos < minTop) { pos = minTop; stopGear = true; } if (stopGear) { var gearVal = Math.abs(pos - 8) / 2; setGear(target, gearVal); clearInterval(target["int_" + target.id]); } break; case "date_mm": var date_yy = _self.gearDate.querySelector(".date_yy"); //得到年份的值 var yyVal = parseInt(date_yy.getAttribute("val")); var maxM = 11; var minM = 0; //当年份到达最大值 if (yyVal == passY - 1) { maxM = _self.maxM - 1; } //当年份到达最小值 if (yyVal == 0) { minM = _self.minM - 1; } var minTop = 8 - (maxM - minM) * 2; if (pos < minTop) { pos = minTop; stopGear = true; } if (stopGear) { var gearVal = Math.abs(pos - 8) / 2 + minM; setGear(target, gearVal); clearInterval(target["int_" + target.id]); } break; case "date_dd": var date_yy = _self.gearDate.querySelector(".date_yy"); var date_mm = _self.gearDate.querySelector(".date_mm"); //得到年份的值 var yyVal = parseInt(date_yy.getAttribute("val")); //得到月份的值 var mmVal = parseInt(date_mm.getAttribute("val")); //返回月份的天数 var maxMonthDays = calcDays(yyVal, mmVal); var maxD = maxMonthDays - 1; var minD = 0; //当年份月份到达最大值 if (yyVal == passY - 1 && _self.maxM == mmVal + 1) { maxD = _self.maxD - 1; } //当年、月到达最小值 if (yyVal == 0 && _self.minM == mmVal + 1) { minD = _self.minD - 1; } var minTop = 8 - (maxD - minD) * 2; if (pos < minTop) { pos = minTop; stopGear = true; } if (stopGear) { var gearVal = Math.abs(pos - 8) / 2 + minD; setGear(target, gearVal); clearInterval(target["int_" + target.id]); } break; case "time_hh": if (pos < -38) { pos = -38; stopGear = true; } if (stopGear) { var gearVal = Math.abs(pos - 8) / 2; setGear(target, gearVal); clearInterval(target["int_" + target.id]); } break; case "time_mm": if (pos < -110) { pos = -110; stopGear = true; } if (stopGear) { var gearVal = Math.abs(pos - 8) / 2; setGear(target, gearVal); clearInterval(target["int_" + target.id]); } break; case "time_ss": if (pos < -110) { pos = -110; stopGear = true; } if (stopGear) { var gearVal = Math.abs(pos - 8) / 2; setGear(target, gearVal); clearInterval(target["int_" + target.id]); } break; default: } target["pos_" + target.id] = pos; target.style["-webkit-transform"] = 'translate3d(0,' + pos + 'em,0)'; target.setAttribute('top', pos + 'em'); d++; }, 30); } //控制插件滚动后停留的值 function setGear(target, val) { val = Math.round(val); target.setAttribute("val", val); if (/date/.test(target.dataset.datetype)) { setDateGearTooth(); } else { setTimeGearTooth(); } } //取消 function closeMobileCalendar(e) { e.preventDefault(); var evt = new CustomEvent('input'); _self.trigger.dispatchEvent(evt); document.body.removeChild(_self.gearDate); } //日期确认 function finishMobileDate(e) { var passY = _self.maxY - _self.minY + 1; var date_yy = parseInt(Math.round(_self.gearDate.querySelector(".date_yy").getAttribute("val"))); var date_mm = parseInt(Math.round(_self.gearDate.querySelector(".date_mm").getAttribute("val"))) + 1; date_mm = date_mm > 9 ? date_mm : '0' + date_mm; var date_dd = parseInt(Math.round(_self.gearDate.querySelector(".date_dd").getAttribute("val"))) + 1; date_dd = date_dd > 9 ? date_dd : '0' + date_dd; _self.trigger.value = (date_yy % passY + _self.minY) + "-" + date_mm + "-" + date_dd; closeMobileCalendar(e); } //日期时间确认 function finishMobileDateTime(e) { var passY = _self.maxY - _self.minY + 1; var date_yy = parseInt(Math.round(_self.gearDate.querySelector(".date_yy").getAttribute("val"))); var date_mm = parseInt(Math.round(_self.gearDate.querySelector(".date_mm").getAttribute("val"))) + 1; date_mm = date_mm > 9 ? date_mm : '0' + date_mm; var date_dd = parseInt(Math.round(_self.gearDate.querySelector(".date_dd").getAttribute("val"))) + 1; date_dd = date_dd > 9 ? date_dd : '0' + date_dd; var time_hh = parseInt(Math.round(_self.gearDate.querySelector(".time_hh").getAttribute("val"))); time_hh = time_hh > 9 ? time_hh : '0' + time_hh; var time_mm = parseInt(Math.round(_self.gearDate.querySelector(".time_mm").getAttribute("val"))); time_mm = time_mm > 9 ? time_mm : '0' + time_mm; _self.trigger.value = (date_yy % passY + _self.minY) + "-" + date_mm + "-" + date_dd + " " + (time_hh.length < 2 ? "0" : "") + time_hh + (time_mm.length < 2 ? ":0" : ":") + time_mm; closeMobileCalendar(e); } //时间确认 function finishMobileTime(e) { var time_hh = parseInt(Math.round(_self.gearDate.querySelector(".time_hh").getAttribute("val"))); time_hh = time_hh > 9 ? time_hh : '0' + time_hh; var time_mm = parseInt(Math.round(_self.gearDate.querySelector(".time_mm").getAttribute("val"))); time_mm = time_mm > 9 ? time_mm : '0' + time_mm; var time_ss = parseInt(Math.round(_self.gearDate.querySelector(".time_ss").getAttribute("val"))); time_ss = time_ss > 9 ? time_ss : '0' + time_ss; _self.trigger.value = (time_hh.length < 2 ? "0" : "") + time_hh + (time_mm.length < 2 ? ":0" : ":") + time_mm+ (time_ss.length < 2 ? ":0" : ":") + time_ss; closeMobileCalendar(e); } _self.trigger.addEventListener('click', { "date": popupDate, "datetime": popupDateTime, "time": popupTime }[type]); } } return MobileCalendar;})()阅读全文
1 0
- 移动端日期选择插件
- 自己动手丰衣足食之移动端日期选择插件
- 自己动手丰衣足食之移动端日期选择插件（强烈推荐）
- 移动端选择日期
- 移动端日期选择组件
- 移动端日期小插件
- jQuery手机移动端日历日期选择
- 关于手机端选择日期插件 mobiscroll
- 手机移动端选择插件 mobileSelect.js
- 日期选择插件
- DatePicker - 日期选择插件
- 时间日期选择插件
- DatePicker - 日期选择插件
- layDate日期选择插件
- LCalendar v1.71移动端日期时间选择控件
- Datepicker日期选择框插件
- 日期选择插件 My97 Datepicker
- Jquery日期、时间选择插件
- Hibernate 事务提交sql语句的顺序
- Spring Security（09）——Filter
- ~守护进程~
- Java NIO系列教程（一） Java NIO 概述
- 消息驱动
- 移动端日期选择插件
- git、cocoapods的简单使用
- 使用PHP自带zlib函数 文件压缩解压缩
- 深入理解Spark 2.1 Core （十四）：securityManager 类源码分析
- linux 中docker-compose安装及卸载
- 急人!AndroidStudio控制台中找不到Android Monitor，并且也找不到Logcat
- Spring Security（10）——退出登录logout
- 排序5——快速排序的四种优化方案
- Styling feature with CanvasGradient or CanvasPattern——使用CanvasGradient或者CanvasPattern为要素设置样式
