移动端日期选择插件

￡神魔★判官ぃ 2022-06-13 05:13 571阅读 0赞

# 移动端的日期选择插件相比PC端比较少，主要原因是不同手机浏览器的效果不一样，mobiscroll 太臃肿了，而且不是免费的，一个字：丑 #

# 在此向大家分享一款手机端的日期选择插件[https://github.com/xfhxbb/lCalendar][https_github.com_xfhxbb_lCalendar]，特此向这位雷锋敬意，另一个是移动端 城市 选择插件[http://blog.csdn.net/libin\_1/article/details/50689075][http_blog.csdn.net_libin_1_article_details_50689075] #

## 或者看看[http://blog.csdn.net/libin\_1/article/details/50400941][http_blog.csdn.net_libin_1_article_details_50400941] ##

![这里写图片描述][20160226154252936]

## QQ 浏览器： ##

## ![这里写图片描述][20160226154323093] ##

## 原版的效果 下载地址[http://download.csdn.net/detail/cometwo/9436022][http_download.csdn.net_detail_cometwo_9436022] ##

![这里写图片描述][20160220203339262]   
![这里写图片描述][20160220203351028]

## ![这里写图片描述][20160220203420498] ##

# 不过有时候需要时分秒，特此在原基础上小小改动一下，下载地址[http://download.csdn.net/detail/cometwo/9437826][http_download.csdn.net_detail_cometwo_9437826] #

## 小米note 自带浏览器测试 ##

![这里写图片描述][20160220203514826]

源码：

<!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;
    })()

[https_github.com_xfhxbb_lCalendar]: https://github.com/xfhxbb/lCalendar
[http_blog.csdn.net_libin_1_article_details_50689075]: http://blog.csdn.net/libin_1/article/details/50689075
[http_blog.csdn.net_libin_1_article_details_50400941]: http://blog.csdn.net/libin_1/article/details/50400941
[20160226154252936]: /images/20220613/8dea44d6cc2d4b808e078d815e50abcb.png
[20160226154323093]: /images/20220613/3c01ed3ff82c4bcab4c61440d06a9c34.png
[http_download.csdn.net_detail_cometwo_9436022]: http://download.csdn.net/detail/cometwo/9436022
[20160220203339262]: /images/20220613/d21cbe28f51849f881b871e42df9ff72.png
[20160220203351028]: /images/20220613/aaabcc4702224fa58badc8886243e5fa.png
[20160220203420498]: /images/20220613/5b88e3f8f5104672bb497cc7de5ad2ed.png
[http_download.csdn.net_detail_cometwo_9437826]: http://download.csdn.net/detail/cometwo/9437826
[20160220203514826]: /images/20220613/e7547a52471248ab8d5e56ac68d1fc5c.png