├── .babelrc ├── .eslintrc.js ├── .gitignore ├── README.md ├── config ├── banner.js └── rolldate.config.js ├── dist ├── index.html ├── rolldate.cjs.js ├── rolldate.es.js ├── rolldate.js └── rolldate.min.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── rollup.config.js └── src ├── index.html ├── index.js ├── index.less └── lib ├── bscroll.min.js └── iscroll ├── index-iscroll4.js ├── index-iscroll5.js ├── iscroll.js └── iscroll5.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-runtime", "external-helpers"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["istanbul"] 16 | } 17 | }, 18 | "ignore":["bscroll.min.js"] 19 | } 20 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "env": { 3 | "browser": true, 4 | "es6": true 5 | }, 6 | "extends": "eslint:recommended", 7 | "globals": { 8 | "Atomics": "readonly", 9 | "SharedArrayBuffer": "readonly" 10 | }, 11 | "parserOptions": { 12 | "ecmaVersion": 2018, 13 | "sourceType": "module" 14 | }, 15 | "ignorePatterns": ["config/", "node_modules/", 'dist/', 'src/lib', '*.config.js'], 16 | "rules": { 17 | "indent": ["error", 2], 18 | "comma-spacing": [2, { 19 | "before": false, 20 | "after": true 21 | }], 22 | "comma-style": [2, "last"] 23 | } 24 | }; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # rolldate [![npm](https://img.shields.io/npm/v/rolldate.svg)](https://www.npmjs.com/package/rolldate) [![npm](https://img.shields.io/npm/dm/rolldate.svg)](https://www.npmjs.com/package/rolldate) 2 | 此插件为[jquery-date](https://github.com/weijhfly/jqueryDatePlugin "jquery-date")的全新版本，主要为了解决旧版参数设计不够合理、滑动效率不高、依赖jquery、没有可选的主题风格等问题，并增加了回调函数，使插件有更大的灵活性。 3 | ## 2019/05/24 3.0版本更新 4 | 上一个版本为2.1.5, 新版本(从3.0.0开始)的改动： 5 | 6 | 1. 使用方式由new rolldate.Date改为new Rolldate; 7 | 2. 回调函数调整：tapBefore更名为init，confirmBefore更名为confirm，取消confirmEnd，增加cancel; 8 | 3. 日期格式(format)调整为无限制，可根据规则随意组合; 9 | 10 | ## 2019/02/03重要版本更新 11 | 上一个版本为1.5.1, 新版本(从2.0.0开始)与此前版本的不同之处： 12 | 13 | 1. 将滑动插件由iscroll替换为better-scroll，提升了兼容性; 14 | 2. 改变了界面风格，操作更加方便; 15 | 3. 取消了rolldate.css文件，只需引入js即可; 16 | 4. 移除了主题风格、日期初始化的滑动时间设置； 17 | 18 | 注意2.0.0之前的版本将不再维护，如有需要请访问：[旧版rolldate](https://weijhfly.github.io/rolldate-index2.html "rolldate") 19 | ## 演示 20 | [rolldate](https://weijhfly.github.io/rolldate-index.html "rolldate")(下方直接扫码即可体验) 21 | 22 | ![rolldate](https://weijhfly.github.io/images/rolldate-demo.jpg) 23 | 24 | ## 使用方式 25 | ### es6 26 | ```js 27 | import Rolldate from 'rolldate' 28 | new Rolldate({ 29 | el:'#date' 30 | }) 31 | ``` 32 | ### commonJS 33 | ```js 34 | var Rolldate = require('rolldate'); 35 | new Rolldate({ 36 | el:'#date' 37 | }) 38 | ``` 39 | ### amd 40 | ```js 41 | require(['rolldate'],function(Rolldate){ 42 | new Rolldate({ 43 | el:'#date' 44 | }) 45 | }) 46 | ``` 47 | ### cmd 48 | ```js 49 | seajs.use('rolldate',function(undefined){ 50 | //插件没有遵循cmd规范，这里的Rolldate是全局的 51 | new Rolldate({ 52 | el:'#date' 53 | }) 54 | }); 55 | ``` 56 | ## 参数、方法说明 57 | 名称|必填|默认值|说明 58 | ---|:-:|:-:|--- 59 | el|否|无|绑定插件的dom元素，插件内部使用document.querySelector，
也可以直接传递dom元素对象，只支持单个 60 | format|否|'YYYY-MM-DD'|日期格式，无限制。规则：年-YYYY 月-MM 日-DD 时-hh 分-mm 秒-ss 使用/、-、空格、:之一分隔，可随意组合 61 | beginYear|否|2000|日期开始年份 62 | endYear|否|2100|日期结束年份 63 | value|否|无|日期初始化的默认值，列如'2018-03-18' 64 | lang|否|年、月、日...|配置插件语言，默认：title:'选择日期',cancel:'取消',confirm:'确认',
year:'年',month:'月',day:'日',hour:'时',min:'分',sec:'秒' 65 | minStep|否|1|分钟按指定数分隔 66 | init|否|null|插件触发前的回调函数，return false可阻止插件执行 67 | moveEnd|否|null|插件滚动后的回调函数，函数返回一个参数(better-scroll实例) 68 | confirm|否|null|确认按钮触发前的回调函数，return false可阻止插件执行，
return其他值可修改日期，函数返回一个参数(选中的日期) 69 | cancel|否|null|插件取消时触发的回调函数 70 | trigger|否|'tap'|默认使用tap解决移动端click事件300ms延迟，可选click替换tap。注意使用tap会阻止其他绑定的click事件的触发 71 | show|否|无|主动触发插件，当trigger为tap时，主动触发插件应该使用此方法 72 | hide|否|无|主动隐藏插件 73 | 74 | ```js 75 | //完整参数、方法示例 76 | var rd = new Rolldate({ 77 | el: '#date', 78 | format: 'YYYY-MM-DD', 79 | beginYear: 2000, 80 | endYear: 2100, 81 | minStep:1, 82 | lang:{title:'自定义标题'}, 83 | trigger:'tap', 84 | init: function() { 85 | console.log('插件开始触发'); 86 | }, 87 | moveEnd: function(scroll) { 88 | console.log('滚动结束'); 89 | }, 90 | confirm: function(date) { 91 | console.log('确定按钮触发'); 92 | }, 93 | cancel: function() { 94 | console.log('插件运行取消'); 95 | } 96 | }) 97 | rd.show(); 98 | rd.hide(); 99 | 100 | ``` 101 | -------------------------------------------------------------------------------- /config/banner.js: -------------------------------------------------------------------------------- 1 | /** 2 | * banner description 3 | */ 4 | var pkg = require('../package.json'), 5 | version = pkg.version, 6 | released = 'Licensed under MIT', 7 | repository = pkg.repository.url, 8 | author = 'Copyright ' + (new Date()).getFullYear() + ' 雾空', 9 | date = 'Released on: aug 4, 2018'; 10 | 11 | module.exports = { 12 | 'info': [ 13 | 'Rolldate ' + version, 14 | author, 15 | repository, 16 | released, 17 | date 18 | ].join('\n') 19 | } -------------------------------------------------------------------------------- /config/rolldate.config.js: -------------------------------------------------------------------------------- 1 | let path = require('path'); 2 | let HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin'); 4 | let CleanWebpackPlugin = require('clean-webpack-plugin'); 5 | let webpack = require('webpack'); 6 | let banner = require('./banner').info; 7 | 8 | module.exports = { 9 | entry:'./src/index.js', 10 | output: { 11 | filename: 'rolldate.min.js', 12 | path: path.resolve('dist'), 13 | library : 'Rolldate', 14 | // libraryTarget: 'umd', 15 | libraryExport: "default", 16 | }, 17 | devServer: { 18 | contentBase: './dist', 19 | host: 'localhost', 20 | //host: '0.0.0.0', 21 | port: 9091, 22 | open: false, 23 | hot: false 24 | }, 25 | module:{ 26 | rules:[ 27 | { 28 | test:/\.js$/, 29 | exclude:/node_modules|bscroll/, 30 | loader:'babel-loader', 31 | options:{ 32 | presets:["es2015"] 33 | } 34 | }, 35 | { 36 | test:/\.less$/, 37 | use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] 38 | } 39 | ] 40 | }, 41 | plugins: [ 42 | new HtmlWebpackPlugin({ 43 | template: './src/index.html', 44 | hash: false, 45 | }), 46 | //new ExtractTextWebpackPlugin('css/rolldate.css'), 47 | //new webpack.BannerPlugin(banner) 48 | ], 49 | optimization: { 50 | minimize: false 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | rolldate demo 8 | 9 | 10 | 38 | 39 | 40 | 41 |
42 |
43 |

rolldate 多格式、功能强大的移动端日期选择插件

44 |

此为rolldate 3.0新版，使用better-scroll替换了iscroll,旧版请点击 45 | 返回旧版

46 |
47 |
48 |
49 |

支持格式：(无限制)

50 |

规则：年-YYYY 月-MM 日-DD 时-hh 分-mm 秒-ss 使用/、-、空格、:之一分隔，可以随意组合

51 |

例：YYYY-MM、YYYY-MM-DD、YYYY-MM-DD hh:mm、YYYY-MM-DD hh:mm:ss、YYYY、MM、DD、hh:mm、hh:mm:ss、YYYY-MM-DD hh、hh、mm、ss、YYYY/DD...

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 |

init、moveEnd、confirm、cancel

113 |
114 |
115 |
116 | 117 |
118 |
119 |
init return false可阻止插件运行
120 |
121 |
122 | 123 |
124 |
125 |
confirm return false阻止插件运行,return其他值可以修改日期展示
126 |
127 |
128 | 129 |
130 |
131 |
132 | 133 |

自定义语言

134 |

lang

135 |
136 |
137 |
138 | 139 |
140 |
141 |
142 | 143 |

设置默认日期

144 |

value

145 |
146 |
147 |
148 | 149 |
150 |
151 |
152 | 153 |

el传dom对象

154 |
155 |
156 |
157 | 158 |
159 |
160 |
161 | 162 |

分钟间隔

163 |
164 |
165 |
166 | 167 |
168 |
169 |
170 |

使用原生click

171 |
172 |
173 |
174 | 175 |
176 |
177 |
178 |

不传el

179 |
180 |
181 |
182 | 183 |
184 |
185 |
186 |

其他示例

187 |
188 |
189 |
190 | 191 |
192 |
193 |
194 |
195 | 389 | 390 | 391 | -------------------------------------------------------------------------------- /dist/rolldate.es.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Rolldate 3.1.3 3 | * Copyright 2018-2020 4 | * weijhfly https://github.com/weijhfly/rolldate 5 | * Licensed under MIT 6 | * Released on: aug 4, 2018 7 | */ 8 | 9 | function styleInject(css, ref) { 10 | if ( ref === void 0 ) ref = {}; 11 | var insertAt = ref.insertAt; 12 | 13 | if (!css || typeof document === 'undefined') { return; } 14 | 15 | var head = document.head || document.getElementsByTagName('head')[0]; 16 | var style = document.createElement('style'); 17 | style.type = 'text/css'; 18 | 19 | if (insertAt === 'top') { 20 | if (head.firstChild) { 21 | head.insertBefore(style, head.firstChild); 22 | } else { 23 | head.appendChild(style); 24 | } 25 | } else { 26 | head.appendChild(style); 27 | } 28 | 29 | if (style.styleSheet) { 30 | style.styleSheet.cssText = css; 31 | } else { 32 | style.appendChild(document.createTextNode(css)); 33 | } 34 | } 35 | 36 | var css = ".rolldate-container{font-size:20px;color:#333;text-align:center}.rolldate-container ul{margin:0;padding:0}.rolldate-container li{list-style-type:none}.rolldate-container header{position:relative;line-height:60px;font-size:18px;border-bottom:1px solid #e0e0e0}.rolldate-container .rolldate-mask{position:fixed;width:100%;height:100%;top:0;left:0;z-index:999;background-color:rgba(37,38,45,.4)}.rolldate-container .rolldate-panel{position:fixed;bottom:0;left:0;width:100%;height:273px;z-index:1000;background:#fff;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-transform:translate3d(0,273px,0);transform:translate3d(0,273px,0)}.rolldate-container .rolldate-btn{position:absolute;left:0;top:0;height:100%;padding:0 15px;color:#666;font-size:16px;cursor:pointer;-webkit-tap-highlight-color:transparent}.rolldate-container .rolldate-confirm{left:auto;right:0;color:#007bff}.rolldate-container .rolldate-content{position:relative;top:20px}.rolldate-container .rolldate-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.rolldate-container .rolldate-wrapper>div{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;height:173px;line-height:36px;overflow:hidden;-webkit-flex-basis:-8e;-ms-flex-preferred-size:-8e;flex-basis:-8e;width:1%}.rolldate-container .rolldate-wrapper ul{margin-top:68px}.rolldate-container .rolldate-wrapper li{height:36px}.rolldate-container .rolldate-dim{position:absolute;left:0;top:0;width:100%;height:68px;background:-o-linear-gradient(bottom,hsla(0,0%,100%,.4),hsla(0,0%,100%,.8));background:-webkit-gradient(linear, left bottom, left top, from(hsla(0, 0%, 100%, 0.4)), to(hsla(0, 0%, 100%, 0.8)));background:-o-linear-gradient(bottom, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0.8));background:linear-gradient(0deg,hsla(0,0%,100%,.4),hsla(0,0%,100%,.8));pointer-events:none;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:10}.rolldate-container .mask-top{border-bottom:1px solid #ebebeb}.rolldate-container .mask-bottom{top:auto;bottom:1px;border-top:1px solid #ebebeb}.rolldate-container .fadeIn{-webkit-transform:translateZ(0);transform:translateZ(0)}.rolldate-container .fadeOut{-webkit-transform:translate3d(0,273px,0);transform:translate3d(0,273px,0)}@media screen and (max-width:414px){.rolldate-container{font-size:18px}}@media screen and (max-width:320px){.rolldate-container{font-size:15px}}"; 37 | styleInject(css); 38 | 39 | var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; 40 | 41 | function createCommonjsModule(fn, module) { 42 | return module = { exports: {} }, fn(module, module.exports), module.exports; 43 | } 44 | 45 | var bscroll_min = createCommonjsModule(function (module, exports) { 46 | /*! 47 | * better-normal-scroll v1.14.1 48 | * (c) 2016-2019 ustbhuangyi 49 | * Released under the MIT License. 50 | */ 51 | !function(t,i){module.exports=i();}(commonjsGlobal,function(){function o(t,i){for(;i+1this.minScrollX||this.xthis.minScrollY||this.ythis.options.momentumLimitTime&&nn+this.options.directionLockThreshold?this.directionLocked="h":n>=o+this.options.directionLockThreshold?this.directionLocked="v":this.directionLocked="n"),"h"===this.directionLocked){if("vertical"===this.options.eventPassthrough)t.preventDefault();else if("horizontal"===this.options.eventPassthrough)return void(this.initiated=!1);s=0;}else if("v"===this.directionLocked){if("horizontal"===this.options.eventPassthrough)t.preventDefault();else if("vertical"===this.options.eventPassthrough)return void(this.initiated=!1);e=0;}e=this.hasHorizontalScroll?e:0,s=this.hasVerticalScroll?s:0,this.movingDirectionX=0this.minScrollX||hthis.minScrollX&&p||hthis.minScrollX?this.minScrollX:this.maxScrollX),(a>this.minScrollY||athis.minScrollY&&l||athis.minScrollY?this.minScrollY:this.maxScrollY),this.moved||(this.moved=!0,this.trigger("scrollStart")),this._translate(h,a),r-this.startTime>this.options.momentumLimitTime&&(this.startTime=r,this.startX=this.x,this.startY=this.y,1===this.options.probeType&&this.trigger("scroll",{x:this.x,y:this.y})),1document.documentElement.clientWidth-this.options.momentumLimitDistance||vdocument.documentElement.clientHeight-this.options.momentumLimitDistance)&&this._end(t);}}},P.prototype._end=function(t){if(this.enabled&&!this.destroyed&&x[t.type]===this.initiated){this.initiated=!1,this.options.preventDefault&&!X(t.target,this.options.preventDefaultException)&&t.preventDefault(),this.options.stopPropagation&&t.stopPropagation(),this.trigger("touchEnd",{x:this.x,y:this.y}),this.isInTransition=!1;var i=Math.round(this.x),e=Math.round(this.y),s=i-this.absStartX,o=e-this.absStartY;if(this.directionX=0this.options.momentumLimitDistance||r>this.options.momentumLimitDistance)){var l=!1,c=!1,p=!1,u=!1,m=this.options.bounce;!1!==m&&(l=void 0===m.top||m.top,c=void 0===m.bottom||m.bottom,p=void 0===m.left||m.left,u=void 0===m.right||m.right);var d=-1===this.directionX&&p||1===this.directionX&&u?this.wrapperWidth:0,f=-1===this.directionY&&l||1===this.directionY&&c?this.wrapperHeight:0,v=this.hasHorizontalScroll?E(this.x,this.startX,n,this.maxScrollX,this.minScrollX,d,this.options):{destination:i,duration:0},g=this.hasVerticalScroll?E(this.y,this.startY,n,this.maxScrollY,this.minScrollY,f,this.options):{destination:e,duration:0};i=v.destination,e=g.destination,a=Math.max(v.duration,g.duration),this.isInTransition=!0;}else this.options.wheel&&(e=Math.round(e/this.itemHeight)*this.itemHeight,a=this.options.wheel.adjustTime||400);var y=M.swipe;if(this.options.snap){var w=this._nearestSnap(i,e);this.currentPage=w,a=this.options.snapSpeed||Math.max(Math.max(Math.min(Math.abs(i-w.x),1e3),Math.min(Math.abs(e-w.y),1e3)),300),i=w.x,e=w.y,this.directionX=0,this.directionY=0,y=this.options.snap.easing||M.bounce;}if(i!==this.x||e!==this.y)return (i>this.minScrollX||ithis.minScrollY||ethis.minScrollY?this.selectedIndex=0:ithis.minScrollX?this.minScrollX:n.leftthis.minScrollY?this.minScrollY:n.topthis.minScrollX?e=this.minScrollX:sthis.minScrollY?o=this.minScrollY:nthis.minScrollX?u=this.minScrollX:uthis.minScrollY?m=this.minScrollY:m 0 && arguments[0] !== undefined ? arguments[0] : {}; 66 | 67 | var _this = this, 68 | el = void 0; 69 | 70 | _this.extend(config); 71 | if (config.el) { 72 | el = $(config.el); 73 | 74 | if (!el || el.bindRolldate) { 75 | return; 76 | } 77 | el.bindRolldate = 1; 78 | 79 | _this.tap(el, function () { 80 | _this.show(); 81 | }); 82 | } 83 | // 设置默认日期 84 | if (config.value) { 85 | if (config.el) { 86 | if (el.nodeName.toLowerCase() == 'input') { 87 | el.value = config.value; 88 | } else { 89 | el.innerText = config.value; 90 | } 91 | } 92 | var str = config.value.replace(/-/g, '/').replace(/[^\d/:\s]/g, ''), 93 | date = new Date(str); 94 | 95 | if (!date || date == 'Invalid Date') { 96 | console.error('Invalid Date：' + str); 97 | } else { 98 | if (config.el) { 99 | el.bindDate = date; 100 | } else { 101 | _this.bindDate = date; 102 | } 103 | } 104 | } 105 | } 106 | Rolldate.prototype = { 107 | constructor: Rolldate, 108 | baseData: function baseData() { 109 | return { 110 | domId: { 111 | YYYY: 'rolldate-year', 112 | MM: 'rolldate-month', 113 | DD: 'rolldate-day', 114 | hh: 'rolldate-hour', 115 | mm: 'rolldate-min', 116 | ss: 'rolldate-sec' 117 | }, 118 | opts: { //插件默认配置 119 | el: '', 120 | format: 'YYYY-MM-DD', 121 | beginYear: 2000, 122 | endYear: 2100, 123 | init: null, 124 | moveEnd: null, 125 | confirm: null, 126 | cancel: null, 127 | minStep: 1, 128 | trigger: 'tap', 129 | lang: { title: '选择日期', cancel: '取消', confirm: '确认', year: '年', month: '月', day: '日', hour: '时', min: '分', sec: '秒' } 130 | } 131 | }; 132 | }, 133 | extend: function extend(config) { 134 | var _this = this, 135 | opts = _this.baseData().opts; 136 | 137 | for (var key in opts) { 138 | if (opts[key] && Object.prototype.toString.call(opts[key]) == '[object Object]') { 139 | for (var key2 in config[key]) { 140 | opts[key][key2] = config[key][key2] == undefined ? opts[key][key2] : config[key][key2]; 141 | } 142 | } else { 143 | opts[key] = config[key] || opts[key]; 144 | } 145 | } 146 | _this.config = opts; 147 | }, 148 | createUI: function createUI() { 149 | var _this = this, 150 | data = _this.baseData(), 151 | config = _this.config, 152 | domId = data.domId, 153 | FormatArr = config.format.split(/-|\/|\s|:/g), 154 | len = FormatArr.length, 155 | ul = '', 156 | date = config.el ? $(config.el).bindDate || new Date() : _this.bindDate || new Date(), 157 | itemClass = '', 158 | lang = config.lang; 159 | 160 | for (var i = 0; i < len; i++) { 161 | var f = FormatArr[i], 162 | domMndex = 0; 163 | 164 | ul += '
    '; 165 | 166 | if (f == 'YYYY') { 167 | for (var j = config.beginYear; j <= config.endYear; j++) { 168 | itemClass = j == date.getFullYear() ? 'active' : ''; 169 | 170 | ul += '
  • ' + j + lang.year + '
    • '; 171 | domMndex++; 172 | } 173 | } else if (f == 'MM') { 174 | for (var k = 1; k <= 12; k++) { 175 | itemClass = k == date.getMonth() + 1 ? 'active' : ''; 176 | 177 | ul += '
  • ' + (k < 10 ? '0' + k : k) + lang.month + '
    • '; 178 | domMndex++; 179 | } 180 | } else if (f == 'DD') { 181 | var day = _this.getMonthlyDay(date.getFullYear(), date.getMonth() + 1); 182 | for (var l = 1; l <= day; l++) { 183 | itemClass = l == date.getDate() ? 'active' : ''; 184 | 185 | ul += '
  • ' + (l < 10 ? '0' + l : l) + lang.day + '
    • '; 186 | domMndex++; 187 | } 188 | } else if (f == 'hh') { 189 | for (var m = 0; m <= 23; m++) { 190 | itemClass = m == date.getHours() ? 'active' : ''; 191 | 192 | ul += '
  • ' + (m < 10 ? '0' + m : m) + lang.hour + '
    • '; 193 | domMndex++; 194 | } 195 | } else if (f == 'mm') { 196 | for (var n = 0; n <= 59; n += config.minStep) { 197 | itemClass = n == date.getMinutes() ? 'active' : ''; 198 | 199 | ul += '
  • ' + (n < 10 ? '0' + n : n) + lang.min + '
    • '; 200 | domMndex++; 201 | } 202 | } else if (f == 'ss') { 203 | for (var o = 0; o <= 59; o++) { 204 | itemClass = o == date.getSeconds() ? 'active' : ''; 205 | 206 | ul += '
  • ' + (o < 10 ? '0' + o : o) + lang.sec + '
    • '; 207 | domMndex++; 208 | } 209 | } 210 | ul += '
'; 211 | } 212 | var $html = '
\n
\n
\n ' + lang.cancel + '\n ' + lang.title + '\n ' + lang.confirm + '\n
\n
\n
\n
\n
\n ' + ul + '\n
\n
\n
', 213 | box = document.createElement("div"); 214 | 215 | box.className = 'rolldate-container'; 216 | box.innerHTML = $html; 217 | document.body.appendChild(box); 218 | 219 | _this.scroll = {}; 220 | 221 | var _loop = function _loop(_i) { 222 | var $id = domId[FormatArr[_i]]; 223 | 224 | _this.scroll[FormatArr[_i]] = new bscroll_min('#' + $id, { 225 | wheel: { 226 | selectedIndex: 0 227 | } 228 | }); 229 | 230 | var that = _this.scroll[FormatArr[_i]], 231 | active = $('#' + $id + ' .active'), 232 | index = active ? active.getAttribute('data-index') : Math.round(date.getMinutes() / config.minStep); 233 | 234 | that.wheelTo(index); 235 | // 滚动结束 236 | that.on('scrollEnd', function () { 237 | if (config.moveEnd) { 238 | config.moveEnd.call(_this, that); 239 | } 240 | if ([domId['YYYY'], domId['MM']].indexOf(that.wrapper.id) != -1 && _this.scroll['YYYY'] && _this.scroll['MM'] && _this.scroll['DD']) { 241 | var _day = _this.getMonthlyDay(_this.getSelected(_this.scroll['YYYY']), _this.getSelected(_this.scroll['MM'])), 242 | li = ''; 243 | 244 | if (_day != $('#' + domId['DD'] + ' li', 1).length) { 245 | 246 | for (var _l = 1; _l <= _day; _l++) { 247 | li += '
  • ' + (_l < 10 ? '0' + _l : _l) + lang.day + '
    • '; 248 | } 249 | $('#' + domId['DD'] + ' ul').innerHTML = li; 250 | _this.scroll['DD'].refresh(); 251 | } 252 | } 253 | }); 254 | }; 255 | 256 | for (var _i = 0; _i < len; _i++) { 257 | _loop(_i); 258 | } 259 | $('.rolldate-panel').className = 'rolldate-panel fadeIn'; 260 | }, 261 | tap: function tap(el, fn) { 262 | var _this = this, 263 | hasTouch = "ontouchstart" in window; 264 | 265 | if (hasTouch && _this.config.trigger == 'tap') { 266 | var o = {}, 267 | touchstart = function touchstart(e) { 268 | var t = e.touches[0]; 269 | 270 | o.startX = t.pageX; 271 | o.startY = t.pageY; 272 | o.sTime = +new Date(); 273 | }, 274 | touchend = function touchend(e) { 275 | var t = e.changedTouches[0]; 276 | 277 | o.endX = t.pageX; 278 | o.endY = t.pageY; 279 | if (+new Date() - o.sTime < 300) { 280 | if (Math.abs(o.endX - o.startX) + Math.abs(o.endY - o.startY) < 20) { 281 | e.preventDefault(); 282 | fn.call(this, e); 283 | } 284 | } 285 | o = {}; 286 | }; 287 | 288 | if (typeof fn == 'function') { 289 | el.addEventListener('touchstart', touchstart); 290 | el.addEventListener('touchend', touchend); 291 | } else { 292 | el.removeEventListener('touchstart', touchstart); 293 | el.removeEventListener('touchend', touchend); 294 | } 295 | } else { 296 | var click = function click(e) { 297 | fn.call(this, e); 298 | }; 299 | if (typeof fn == 'function') { 300 | el.addEventListener('click', click); 301 | } else { 302 | el.removeEventListener('click', click); 303 | } 304 | } 305 | }, 306 | show: function show() { 307 | var _this = this, 308 | config = _this.config, 309 | el = void 0; 310 | 311 | if (config.el) { 312 | el = $(config.el); 313 | 314 | if (!el.bindRolldate) { 315 | return; 316 | } 317 | if (el.nodeName.toLowerCase() == 'input') { 318 | el.blur(); 319 | } 320 | } 321 | if ($('.rolldate-container')) { 322 | return; 323 | } 324 | if (config.init && config.init.call(_this) === false) { 325 | return; 326 | } 327 | 328 | _this.createUI(); 329 | _this.event(); 330 | }, 331 | hide: function hide(flag) { 332 | var _this = this, 333 | el = $('.rolldate-panel.fadeIn'); 334 | 335 | if (el) { 336 | el.className = 'rolldate-panel fadeOut'; 337 | _this.destroy(flag); 338 | } 339 | }, 340 | event: function event() { 341 | var _this = this, 342 | mask = $('.rolldate-mask'), 343 | cancel = $('.rolldate-cancel'), 344 | confirm = $('.rolldate-confirm'); 345 | 346 | _this.tap(mask, function () { 347 | _this.hide(1); 348 | }); 349 | _this.tap(cancel, function () { 350 | _this.hide(1); 351 | }); 352 | _this.tap(confirm, function () { 353 | var config = _this.config, 354 | el = void 0, 355 | date = config.format, 356 | newDate = new Date(); 357 | 358 | for (var f in _this.scroll) { 359 | var d = _this.getSelected(_this.scroll[f]); 360 | 361 | date = date.replace(f, d); 362 | if (f == 'YYYY') { 363 | newDate.setFullYear(d); 364 | } else if (f == 'MM') { 365 | newDate.setMonth(d - 1); 366 | } else if (f == 'DD') { 367 | newDate.setDate(d); 368 | } else if (f == 'hh') { 369 | newDate.setHours(d); 370 | } else if (f == 'mm') { 371 | newDate.setMinutes(d); 372 | } else if (f == 'ss') { 373 | newDate.setSeconds(d); 374 | } 375 | } 376 | if (config.confirm) { 377 | var flag = config.confirm.call(_this, date); 378 | if (flag === false) { 379 | return false; 380 | } else if (flag) { 381 | date = flag; 382 | } 383 | } 384 | if (config.el) { 385 | el = $(config.el); 386 | if (el.nodeName.toLowerCase() == 'input') { 387 | el.value = date; 388 | } else { 389 | el.innerText = date; 390 | } 391 | el.bindDate = newDate; 392 | } else { 393 | _this.bindDate = newDate; 394 | } 395 | _this.hide(); 396 | }); 397 | }, 398 | getMonthlyDay: function getMonthlyDay(year, month) { 399 | var day = void 0; 400 | if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) { 401 | day = 31; 402 | } else if (month == 4 || month == 6 || month == 11 || month == 9) { 403 | day = 30; 404 | } else if (month == 2) { 405 | if (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)) { 406 | //闰年 407 | day = 29; 408 | } else { 409 | day = 28; 410 | } 411 | } 412 | return day; 413 | }, 414 | destroy: function destroy(flag) { 415 | var _this = this, 416 | config = _this.config; 417 | 418 | for (var i in _this.scroll) { 419 | _this.scroll[i].destroy(); 420 | } 421 | 422 | if (flag && config.cancel) { 423 | config.cancel.call(_this); 424 | } 425 | 426 | _this.tap($('.rolldate-mask'), 0); 427 | _this.tap($('.rolldate-cancel'), 0); 428 | _this.tap($('.rolldate-confirm'), 0); 429 | setTimeout(function () { 430 | var el = $('.rolldate-container'); 431 | 432 | if (el) document.body.removeChild(el); 433 | el = null; 434 | }, 300); 435 | }, 436 | getSelected: function getSelected(scroll) { 437 | return $('#' + scroll.wrapper.id + ' li', 1)[scroll.getSelectedIndex()].innerText.replace(/\D/g, ''); 438 | } 439 | }; 440 | Rolldate.version = version; 441 | 442 | export default Rolldate; 443 | -------------------------------------------------------------------------------- /dist/rolldate.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Rolldate 3.1.3 3 | * Copyright 2018-2020 4 | * weijhfly https://github.com/weijhfly/rolldate 5 | * Licensed under MIT 6 | * Released on: aug 4, 2018 7 | */ 8 | 9 | !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t=t||self).Rolldate=i()}(this,function(){"use strict";!function(t,i){void 0===i&&(i={});var e=i.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===e&&o.firstChild?o.insertBefore(s,o.firstChild):o.appendChild(s),s.styleSheet?s.styleSheet.cssText=t:s.appendChild(document.createTextNode(t))}}(".rolldate-container{font-size:20px;color:#333;text-align:center}.rolldate-container ul{margin:0;padding:0}.rolldate-container li{list-style-type:none}.rolldate-container header{position:relative;line-height:60px;font-size:18px;border-bottom:1px solid #e0e0e0}.rolldate-container .rolldate-mask{position:fixed;width:100%;height:100%;top:0;left:0;z-index:999;background-color:rgba(37,38,45,.4)}.rolldate-container .rolldate-panel{position:fixed;bottom:0;left:0;width:100%;height:273px;z-index:1000;background:#fff;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-transform:translate3d(0,273px,0);transform:translate3d(0,273px,0)}.rolldate-container .rolldate-btn{position:absolute;left:0;top:0;height:100%;padding:0 15px;color:#666;font-size:16px;cursor:pointer;-webkit-tap-highlight-color:transparent}.rolldate-container .rolldate-confirm{left:auto;right:0;color:#007bff}.rolldate-container .rolldate-content{position:relative;top:20px}.rolldate-container .rolldate-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.rolldate-container .rolldate-wrapper>div{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;height:173px;line-height:36px;overflow:hidden;-webkit-flex-basis:-8e;-ms-flex-preferred-size:-8e;flex-basis:-8e;width:1%}.rolldate-container .rolldate-wrapper ul{margin-top:68px}.rolldate-container .rolldate-wrapper li{height:36px}.rolldate-container .rolldate-dim{position:absolute;left:0;top:0;width:100%;height:68px;background:-o-linear-gradient(bottom,hsla(0,0%,100%,.4),hsla(0,0%,100%,.8));background:-webkit-gradient(linear, left bottom, left top, from(hsla(0, 0%, 100%, 0.4)), to(hsla(0, 0%, 100%, 0.8)));background:-o-linear-gradient(bottom, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0.8));background:linear-gradient(0deg,hsla(0,0%,100%,.4),hsla(0,0%,100%,.8));pointer-events:none;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:10}.rolldate-container .mask-top{border-bottom:1px solid #ebebeb}.rolldate-container .mask-bottom{top:auto;bottom:1px;border-top:1px solid #ebebeb}.rolldate-container .fadeIn{-webkit-transform:translateZ(0);transform:translateZ(0)}.rolldate-container .fadeOut{-webkit-transform:translate3d(0,273px,0);transform:translate3d(0,273px,0)}@media screen and (max-width:414px){.rolldate-container{font-size:18px}}@media screen and (max-width:320px){.rolldate-container{font-size:15px}}");"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function S(t,i){return"string"!=typeof t&&t.nodeType?t:i?document.querySelectorAll(t):document.querySelector(t)}var t,Y=(function(t,i){t.exports=function(){function s(t,i){for(;i+1this.minScrollX||this.xthis.minScrollY||this.ythis.options.momentumLimitTime&&nn+this.options.directionLockThreshold?this.directionLocked="h":n>=s+this.options.directionLockThreshold?this.directionLocked="v":this.directionLocked="n"),"h"===this.directionLocked){if("vertical"===this.options.eventPassthrough)t.preventDefault();else if("horizontal"===this.options.eventPassthrough)return void(this.initiated=!1);o=0}else if("v"===this.directionLocked){if("horizontal"===this.options.eventPassthrough)t.preventDefault();else if("vertical"===this.options.eventPassthrough)return void(this.initiated=!1);e=0}e=this.hasHorizontalScroll?e:0,o=this.hasVerticalScroll?o:0,this.movingDirectionX=0this.minScrollX||athis.minScrollX&&d||athis.minScrollX?this.minScrollX:this.maxScrollX),(l>this.minScrollY||lthis.minScrollY&&h||lthis.minScrollY?this.minScrollY:this.maxScrollY),this.moved||(this.moved=!0,this.trigger("scrollStart")),this._translate(a,l),r-this.startTime>this.options.momentumLimitTime&&(this.startTime=r,this.startX=this.x,this.startY=this.y,1===this.options.probeType&&this.trigger("scroll",{x:this.x,y:this.y})),1document.documentElement.clientWidth-this.options.momentumLimitDistance||vdocument.documentElement.clientHeight-this.options.momentumLimitDistance)&&this._end(t)}}},L.prototype._end=function(t){if(this.enabled&&!this.destroyed&&T[t.type]===this.initiated){this.initiated=!1,this.options.preventDefault&&!Y(t.target,this.options.preventDefaultException)&&t.preventDefault(),this.options.stopPropagation&&t.stopPropagation(),this.trigger("touchEnd",{x:this.x,y:this.y}),this.isInTransition=!1;var i=Math.round(this.x),e=Math.round(this.y),o=i-this.absStartX,s=e-this.absStartY;if(this.directionX=0this.options.momentumLimitDistance||r>this.options.momentumLimitDistance)){var h=!1,c=!1,d=!1,p=!1,u=this.options.bounce;!1!==u&&(h=void 0===u.top||u.top,c=void 0===u.bottom||u.bottom,d=void 0===u.left||u.left,p=void 0===u.right||u.right);var m=-1===this.directionX&&d||1===this.directionX&&p?this.wrapperWidth:0,f=-1===this.directionY&&h||1===this.directionY&&c?this.wrapperHeight:0,v=this.hasHorizontalScroll?_(this.x,this.startX,n,this.maxScrollX,this.minScrollX,m,this.options):{destination:i,duration:0},g=this.hasVerticalScroll?_(this.y,this.startY,n,this.maxScrollY,this.minScrollY,f,this.options):{destination:e,duration:0};i=v.destination,e=g.destination,l=Math.max(v.duration,g.duration),this.isInTransition=!0}else this.options.wheel&&(e=Math.round(e/this.itemHeight)*this.itemHeight,l=this.options.wheel.adjustTime||400);var w=X.swipe;if(this.options.snap){var y=this._nearestSnap(i,e);this.currentPage=y,l=this.options.snapSpeed||Math.max(Math.max(Math.min(Math.abs(i-y.x),1e3),Math.min(Math.abs(e-y.y),1e3)),300),i=y.x,e=y.y,this.directionX=0,this.directionY=0,w=this.options.snap.easing||X.bounce}if(i!==this.x||e!==this.y)return(i>this.minScrollX||ithis.minScrollY||ethis.minScrollY?this.selectedIndex=0:ithis.minScrollX?this.minScrollX:n.leftthis.minScrollY?this.minScrollY:n.topthis.minScrollX?e=this.minScrollX:othis.minScrollY?s=this.minScrollY:nthis.minScrollX?p=this.minScrollX:pthis.minScrollY?u=this.minScrollY:u
      ',"YYYY"==s)for(var p=r.beginYear;p<=r.endYear;p++)e+='
    • '+p+c.year+"
      • ",d++;else if("MM"==s)for(var u=1;u<=12;u++)e+='
    • '+(u<10?"0"+u:u)+c.month+"
      • ",d++;else if("DD"==s)for(var m=n.getMonthlyDay(h.getFullYear(),h.getMonth()+1),f=1;f<=m;f++)e+='
    • '+(f<10?"0"+f:f)+c.day+"
      • ",d++;else if("hh"==s)for(var v=0;v<=23;v++)e+='
    • '+(v<10?"0"+v:v)+c.hour+"
      • ",d++;else if("mm"==s)for(var g=0;g<=59;g+=r.minStep)e+='
    • '+(g<10?"0"+g:g)+c.min+"
      • ",d++;else if("ss"==s)for(var w=0;w<=59;w++)e+='
    • '+(w<10?"0"+w:w)+c.sec+"
      • ",d++;e+="
    "}var y='
    \n
    \n
    \n '+c.cancel+"\n "+c.title+'\n '+c.confirm+'\n
    \n
    \n
    \n
    \n
    \n '+e+"\n
    \n
    \n
    ",b=document.createElement("div");b.className="rolldate-container",b.innerHTML=y,document.body.appendChild(b),n.scroll={};for(var x=function(t){var i=a[l[t]];n.scroll[l[t]]=new Y("#"+i,{wheel:{selectedIndex:0}});var o=n.scroll[l[t]],e=S("#"+i+" .active"),s=e?e.getAttribute("data-index"):Math.round(h.getMinutes()/r.minStep);o.wheelTo(s),o.on("scrollEnd",function(){if(r.moveEnd&&r.moveEnd.call(n,o),-1!=[a.YYYY,a.MM].indexOf(o.wrapper.id)&&n.scroll.YYYY&&n.scroll.MM&&n.scroll.DD){var t=n.getMonthlyDay(n.getSelected(n.scroll.YYYY),n.getSelected(n.scroll.MM)),i="";if(t!=S("#"+a.DD+" li",1).length){for(var e=1;e<=t;e++)i+='
  • '+(e<10?"0"+e:e)+c.day+"
    • ";S("#"+a.DD+" ul").innerHTML=i,n.scroll.DD.refresh()}}})},T=0;T 2 | 3 | 4 | 5 | 6 | 7 | rolldate demo 8 | 9 | 10 | 38 | 39 | 40 | 41 |
    42 |
    43 |

    rolldate 多格式、功能强大的移动端日期选择插件

    44 |

    此为rolldate 3.0新版，使用better-scroll替换了iscroll,旧版请点击 45 | 返回旧版

    46 |
    47 |
    48 |
    49 |

    支持格式：(无限制)

    50 |

    规则：年-YYYY 月-MM 日-DD 时-hh 分-mm 秒-ss 使用/、-、空格、:之一分隔，可以随意组合

    51 |

    例：YYYY-MM、YYYY-MM-DD、YYYY-MM-DD hh:mm、YYYY-MM-DD hh:mm:ss、YYYY、MM、DD、hh:mm、hh:mm:ss、YYYY-MM-DD hh、hh、mm、ss、YYYY/DD...

    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 |

    init、moveEnd、confirm、cancel

    113 |
    114 |
    115 |
    116 | 117 |
    118 |
    119 |
    init return false可阻止插件运行
    120 |
    121 |
    122 | 123 |
    124 |
    125 |
    confirm return false阻止插件运行,return其他值可以修改日期展示
    126 |
    127 |
    128 | 129 |
    130 |
    131 |
    132 | 133 |

    自定义语言

    134 |

    lang

    135 |
    136 |
    137 |
    138 | 139 |
    140 |
    141 |
    142 | 143 |

    设置默认日期

    144 |

    value

    145 |
    146 |
    147 |
    148 | 149 |
    150 |
    151 |
    152 | 153 |

    el传dom对象

    154 |
    155 |
    156 |
    157 | 158 |
    159 |
    160 |
    161 | 162 |

    分钟间隔

    163 |
    164 |
    165 |
    166 | 167 |
    168 |
    169 |
    170 |

    使用原生click

    171 |
    172 |
    173 |
    174 | 175 |
    176 |
    177 |
    178 |

    不传el

    179 |
    180 |
    181 |
    182 | 183 |
    184 |
    185 |
    186 |

    其他示例

    187 |
    188 |
    189 |
    190 | 191 |
    192 |
    193 |
    194 |
    195 | 389 | 390 | 391 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './index.less'; 2 | 3 | import BScroll from './lib/bscroll.min'; 4 | import {version} from '../package.json'; 5 | 6 | let $ = (selector, flag) => { 7 | if(typeof selector != 'string' && selector.nodeType){ 8 | return selector; 9 | } 10 | 11 | return flag? document.querySelectorAll(selector) : document.querySelector(selector); 12 | } 13 | 14 | function Rolldate(config = {}){ 15 | let _this = this, 16 | el; 17 | 18 | _this.extend(config); 19 | if(config.el){ 20 | el = $(config.el); 21 | 22 | if(!el || el.bindRolldate){return;} 23 | el.bindRolldate = 1; 24 | 25 | _this.tap(el, function(){ 26 | _this.show(); 27 | }) 28 | } 29 | // 设置默认日期 30 | if(config.value){ 31 | if(config.el){ 32 | if(el.nodeName.toLowerCase() == 'input'){ 33 | el.value = config.value; 34 | }else{ 35 | el.innerText = config.value; 36 | } 37 | } 38 | let str = config.value.replace(/-/g, '/').replace(/[^\d/:\s]/g, ''), 39 | date = new Date(str); 40 | 41 | if(!date || date == 'Invalid Date'){ 42 | console.error('Invalid Date：'+str); 43 | }else{ 44 | if(config.el){ 45 | el.bindDate = date; 46 | }else{ 47 | _this.bindDate = date; 48 | } 49 | } 50 | } 51 | } 52 | Rolldate.prototype = { 53 | constructor: Rolldate, 54 | baseData: function(){ 55 | return { 56 | domId:{ 57 | YYYY:'rolldate-year', 58 | MM:'rolldate-month', 59 | DD:'rolldate-day', 60 | hh:'rolldate-hour', 61 | mm:'rolldate-min', 62 | ss:'rolldate-sec' 63 | }, 64 | opts:{//插件默认配置 65 | el:'', 66 | format:'YYYY-MM-DD', 67 | beginYear:2000, 68 | endYear:2100, 69 | init:null, 70 | moveEnd:null, 71 | confirm:null, 72 | cancel:null, 73 | minStep:1, 74 | trigger:'tap', 75 | lang:{title:'选择日期', cancel:'取消', confirm:'确认', year:'年', month:'月', day:'日', hour:'时', min:'分', sec:'秒'} 76 | } 77 | }; 78 | }, 79 | extend: function(config){ 80 | let _this = this, 81 | opts = _this.baseData().opts; 82 | 83 | for(let key in opts){ 84 | if(opts[key] && Object.prototype.toString.call(opts[key]) == '[object Object]'){ 85 | for(let key2 in config[key]){ 86 | opts[key][key2] = config[key][key2] == undefined? opts[key][key2]:config[key][key2]; 87 | } 88 | }else{ 89 | opts[key] = config[key] || opts[key]; 90 | } 91 | } 92 | _this.config = opts; 93 | }, 94 | createUI: function(){ 95 | let _this = this, 96 | data = _this.baseData(), 97 | config = _this.config, 98 | domId = data.domId, 99 | FormatArr = config.format.split(/-|\/|\s|:/g), 100 | len = FormatArr.length, 101 | ul = '', 102 | date = config.el? ($(config.el).bindDate || new Date()) : (_this.bindDate || new Date()), 103 | itemClass = '', 104 | lang = config.lang; 105 | 106 | for(let i=0; i
      '; 111 | 112 | if(f == 'YYYY'){ 113 | for(let j=config.beginYear; j<=config.endYear; j++){ 114 | itemClass = j == date.getFullYear()? 'active':''; 115 | 116 | ul += `
    • ${j}${lang.year}
      • `; 117 | domMndex ++; 118 | } 119 | }else if(f == 'MM'){ 120 | for(let k=1; k<=12; k++){ 121 | itemClass = k == date.getMonth() + 1? 'active':''; 122 | 123 | ul += `
    • ${k<10? '0'+k : k}${lang.month}
      • `; 124 | domMndex ++; 125 | } 126 | }else if(f == 'DD'){ 127 | let day = _this.getMonthlyDay(date.getFullYear(), date.getMonth() + 1); 128 | for(let l=1; l<=day; l++){ 129 | itemClass = l == date.getDate()? 'active':''; 130 | 131 | ul += `
    • ${l<10? '0'+l : l}${lang.day}
      • `; 132 | domMndex ++; 133 | } 134 | }else if(f == 'hh'){ 135 | for(let m=0; m<=23; m++){ 136 | itemClass = m == date.getHours()? 'active':''; 137 | 138 | ul += `
    • ${m<10? '0'+m : m}${lang.hour}
      • `; 139 | domMndex ++; 140 | } 141 | }else if(f == 'mm'){ 142 | for(let n=0; n<=59; n+=config.minStep){ 143 | itemClass = n == date.getMinutes()? 'active':''; 144 | 145 | ul += `
    • ${n<10? '0'+n : n}${lang.min}
      • `; 146 | domMndex ++; 147 | } 148 | }else if(f == 'ss'){ 149 | for(let o=0; o<=59; o++){ 150 | itemClass = o == date.getSeconds()? 'active':''; 151 | 152 | ul += `
    • ${o<10? '0'+o : o}${lang.sec}
      • `; 153 | domMndex ++; 154 | } 155 | } 156 | ul += '
    ' 157 | } 158 | let $html = `
    159 |
    160 |
    161 | ${lang.cancel} 162 | ${lang.title} 163 | ${lang.confirm} 164 |
    165 |
    166 |
    167 |
    168 |
    169 | ${ul} 170 |
    171 |
    172 |
    `, 173 | box = document.createElement("div"); 174 | 175 | box.className = `rolldate-container`; 176 | box.innerHTML = $html; 177 | document.body.appendChild(box); 178 | 179 | _this.scroll = {}; 180 | 181 | for(let i=0; i { 197 | if(config.moveEnd){ 198 | config.moveEnd.call(_this, that); 199 | } 200 | if([domId['YYYY'], domId['MM']].indexOf(that.wrapper.id) != -1 && _this.scroll['YYYY'] && _this.scroll['MM'] && _this.scroll['DD']){ 201 | let day = _this.getMonthlyDay(_this.getSelected(_this.scroll['YYYY']), _this.getSelected(_this.scroll['MM'])), 202 | li = ''; 203 | 204 | if(day != $('#'+domId['DD']+' li', 1).length){ 205 | 206 | for(let l=1; l<=day; l++){ 207 | li += `
  • ${l<10? '0'+l : l}${lang.day}
    • `; 208 | } 209 | $('#'+domId['DD']+' ul').innerHTML = li; 210 | _this.scroll['DD'].refresh(); 211 | } 212 | } 213 | }) 214 | 215 | } 216 | $('.rolldate-panel').className = 'rolldate-panel fadeIn'; 217 | }, 218 | tap:function (el, fn) { 219 | let _this = this, 220 | hasTouch = "ontouchstart" in window; 221 | 222 | if(hasTouch && _this.config.trigger == 'tap'){ 223 | let o = {}, 224 | touchstart = function(e) { 225 | let t = e.touches[0]; 226 | 227 | o.startX = t.pageX; 228 | o.startY = t.pageY; 229 | o.sTime = + new Date; 230 | }, 231 | touchend = function(e) { 232 | let t = e.changedTouches[0]; 233 | 234 | o.endX = t.pageX; 235 | o.endY = t.pageY; 236 | if((+ new Date) - o.sTime < 300){ 237 | if(Math.abs(o.endX-o.startX) + Math.abs(o.endY-o.startY) < 20){ 238 | e.preventDefault(); 239 | fn.call(this, e); 240 | } 241 | } 242 | o = {}; 243 | }; 244 | 245 | if(typeof fn == 'function'){ 246 | el.addEventListener('touchstart', touchstart); 247 | el.addEventListener('touchend', touchend); 248 | }else{ 249 | el.removeEventListener('touchstart', touchstart); 250 | el.removeEventListener('touchend', touchend); 251 | } 252 | }else{ 253 | let click = function(e) { 254 | fn.call(this, e); 255 | }; 256 | if(typeof fn == 'function'){ 257 | el.addEventListener('click', click); 258 | }else{ 259 | el.removeEventListener('click', click); 260 | } 261 | } 262 | }, 263 | show: function(){ 264 | let _this = this, 265 | config = _this.config, 266 | el; 267 | 268 | if(config.el){ 269 | el = $(config.el); 270 | 271 | if(!el.bindRolldate){return;} 272 | if(el.nodeName.toLowerCase() == 'input'){el.blur();} 273 | } 274 | if($('.rolldate-container')){return;} 275 | if(config.init && config.init.call(_this) === false){return;} 276 | 277 | _this.createUI(); 278 | _this.event(); 279 | }, 280 | hide: function(flag){ 281 | let _this = this, 282 | el = $('.rolldate-panel.fadeIn'); 283 | 284 | if(el){ 285 | el.className = 'rolldate-panel fadeOut'; 286 | _this.destroy(flag); 287 | } 288 | }, 289 | event: function(){ 290 | let _this = this, 291 | mask = $('.rolldate-mask'), 292 | cancel = $('.rolldate-cancel'), 293 | confirm = $('.rolldate-confirm'); 294 | 295 | _this.tap(mask, function(){ 296 | _this.hide(1); 297 | }) 298 | _this.tap(cancel, function(){ 299 | _this.hide(1); 300 | }) 301 | _this.tap(confirm, function(){ 302 | let config = _this.config, 303 | el, 304 | date = config.format, 305 | newDate = new Date(); 306 | 307 | for(let f in _this.scroll){ 308 | let d = _this.getSelected(_this.scroll[f]); 309 | 310 | date = date.replace(f, d); 311 | if(f == 'YYYY'){ 312 | newDate.setFullYear(d); 313 | }else if(f == 'MM'){ 314 | newDate.setMonth(d-1); 315 | }else if(f == 'DD'){ 316 | newDate.setDate(d); 317 | }else if(f == 'hh'){ 318 | newDate.setHours(d); 319 | }else if(f == 'mm'){ 320 | newDate.setMinutes(d); 321 | }else if(f == 'ss'){ 322 | newDate.setSeconds(d); 323 | } 324 | } 325 | if(config.confirm){ 326 | let flag = config.confirm.call(_this, date); 327 | if(flag === false){ 328 | return false 329 | }else if(flag){ 330 | date = flag; 331 | } 332 | } 333 | if(config.el){ 334 | el = $(config.el); 335 | if(el.nodeName.toLowerCase() == 'input'){ 336 | el.value = date; 337 | }else{ 338 | el.innerText = date; 339 | } 340 | el.bindDate = newDate; 341 | }else{ 342 | _this.bindDate = newDate; 343 | } 344 | _this.hide(); 345 | 346 | }) 347 | }, 348 | getMonthlyDay: function(year, month){ 349 | let day; 350 | if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) { 351 | day = 31 352 | } else if (month == 4 || month == 6 || month == 11 || month == 9) { 353 | day = 30 354 | } else if (month == 2) { 355 | if (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)) { //闰年 356 | day = 29 357 | } else { 358 | day = 28 359 | } 360 | 361 | } 362 | return day; 363 | }, 364 | destroy: function(flag){ 365 | let _this = this, 366 | config = _this.config; 367 | 368 | for(let i in _this.scroll){ 369 | _this.scroll[i].destroy(); 370 | } 371 | 372 | if(flag && config.cancel){ 373 | config.cancel.call(_this); 374 | } 375 | 376 | _this.tap($('.rolldate-mask'), 0); 377 | _this.tap($('.rolldate-cancel'), 0); 378 | _this.tap($('.rolldate-confirm'), 0); 379 | setTimeout(function() { 380 | let el = $('.rolldate-container'); 381 | 382 | if(el)document.body.removeChild(el); 383 | el = null; 384 | }, 300); 385 | }, 386 | getSelected: function(scroll){ 387 | return $('#'+scroll.wrapper.id+' li', 1)[scroll.getSelectedIndex()].innerText.replace(/\D/g, ''); 388 | } 389 | } 390 | Rolldate.version = version; 391 | 392 | export default Rolldate; 393 | -------------------------------------------------------------------------------- /src/index.less: -------------------------------------------------------------------------------- 1 | .rolldate-container { 2 | ul { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | li { 8 | list-style-type: none; 9 | } 10 | 11 | font-size: 20px; 12 | color: #333; 13 | text-align: center; 14 | 15 | header { 16 | position: relative; 17 | line-height: 60px; 18 | font-size: 18px; 19 | border-bottom: 1px solid #e0e0e0; 20 | } 21 | 22 | .rolldate-mask { 23 | position: fixed; 24 | width: 100%; 25 | height: 100%; 26 | top: 0; 27 | left: 0; 28 | z-index: 999; 29 | background-color: rgba(37,38,45,0.4); 30 | } 31 | 32 | .rolldate-panel { 33 | position: fixed; 34 | bottom: 0; 35 | left: 0; 36 | width: 100%; 37 | height: 273px; 38 | z-index: 1000; 39 | background: #fff; 40 | transition: all .3s ease-in-out; 41 | transform: translate3d(0, 273px, 0); 42 | } 43 | 44 | .rolldate-btn { 45 | position: absolute; 46 | left: 0; 47 | top: 0; 48 | height: 100%; 49 | padding: 0 15px; 50 | color: #666; 51 | font-size: 16px; 52 | cursor: pointer; 53 | -webkit-tap-highlight-color: transparent; 54 | } 55 | 56 | .rolldate-confirm { 57 | left: auto; 58 | right: 0; 59 | color: #007bff; 60 | } 61 | 62 | .rolldate-content { 63 | position: relative; 64 | top: 20px; 65 | } 66 | 67 | .rolldate-wrapper { 68 | display: flex; 69 | 70 | > div { 71 | flex: 1; 72 | height: 173px; 73 | line-height: 36px; 74 | overflow: hidden; 75 | flex-basis: 1e-9px; 76 | width: 1%; 77 | } 78 | 79 | ul { 80 | margin-top: 68px; 81 | } 82 | 83 | li { 84 | height: 36px; 85 | } 86 | } 87 | 88 | .rolldate-dim { 89 | position: absolute; 90 | left: 0; 91 | top: 0; 92 | width: 100%; 93 | height: 68px; 94 | background: linear-gradient(0deg,hsla(0,0%,100%,.4),hsla(0,0%,100%,.8)); 95 | pointer-events: none; 96 | transform: translateZ(0); 97 | z-index: 10; 98 | } 99 | 100 | .mask-top { 101 | border-bottom: 1px solid #ebebeb; 102 | } 103 | 104 | .mask-bottom { 105 | top: auto; 106 | bottom: 1px; 107 | border-top: 1px solid #ebebeb; 108 | } 109 | 110 | .fadeIn { 111 | transform: translate3d(0, 0, 0); 112 | } 113 | 114 | .fadeOut { 115 | transform: translate3d(0, 273px, 0); 116 | } 117 | } 118 | @media screen and (max-width: 414px) { 119 | .rolldate-container { 120 | font-size: 18px; 121 | } 122 | } 123 | @media screen and (max-width: 320px) { 124 | .rolldate-container { 125 | font-size: 15px; 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /src/lib/bscroll.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * better-normal-scroll v1.14.1 3 | * (c) 2016-2019 ustbhuangyi 4 | * Released under the MIT License. 5 | */ 6 | !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.BScroll=i()}(this,function(){"use strict";function o(t,i){for(;i+1this.minScrollX||this.xthis.minScrollY||this.ythis.options.momentumLimitTime&&nn+this.options.directionLockThreshold?this.directionLocked="h":n>=o+this.options.directionLockThreshold?this.directionLocked="v":this.directionLocked="n"),"h"===this.directionLocked){if("vertical"===this.options.eventPassthrough)t.preventDefault();else if("horizontal"===this.options.eventPassthrough)return void(this.initiated=!1);s=0}else if("v"===this.directionLocked){if("horizontal"===this.options.eventPassthrough)t.preventDefault();else if("vertical"===this.options.eventPassthrough)return void(this.initiated=!1);e=0}e=this.hasHorizontalScroll?e:0,s=this.hasVerticalScroll?s:0,this.movingDirectionX=0this.minScrollX||hthis.minScrollX&&p||hthis.minScrollX?this.minScrollX:this.maxScrollX),(a>this.minScrollY||athis.minScrollY&&l||athis.minScrollY?this.minScrollY:this.maxScrollY),this.moved||(this.moved=!0,this.trigger("scrollStart")),this._translate(h,a),r-this.startTime>this.options.momentumLimitTime&&(this.startTime=r,this.startX=this.x,this.startY=this.y,1===this.options.probeType&&this.trigger("scroll",{x:this.x,y:this.y})),1document.documentElement.clientWidth-this.options.momentumLimitDistance||vdocument.documentElement.clientHeight-this.options.momentumLimitDistance)&&this._end(t)}}},P.prototype._end=function(t){if(this.enabled&&!this.destroyed&&x[t.type]===this.initiated){this.initiated=!1,this.options.preventDefault&&!X(t.target,this.options.preventDefaultException)&&t.preventDefault(),this.options.stopPropagation&&t.stopPropagation(),this.trigger("touchEnd",{x:this.x,y:this.y}),this.isInTransition=!1;var i=Math.round(this.x),e=Math.round(this.y),s=i-this.absStartX,o=e-this.absStartY;if(this.directionX=0this.options.momentumLimitDistance||r>this.options.momentumLimitDistance)){var l=!1,c=!1,p=!1,u=!1,m=this.options.bounce;!1!==m&&(l=void 0===m.top||m.top,c=void 0===m.bottom||m.bottom,p=void 0===m.left||m.left,u=void 0===m.right||m.right);var d=-1===this.directionX&&p||1===this.directionX&&u?this.wrapperWidth:0,f=-1===this.directionY&&l||1===this.directionY&&c?this.wrapperHeight:0,v=this.hasHorizontalScroll?E(this.x,this.startX,n,this.maxScrollX,this.minScrollX,d,this.options):{destination:i,duration:0},g=this.hasVerticalScroll?E(this.y,this.startY,n,this.maxScrollY,this.minScrollY,f,this.options):{destination:e,duration:0};i=v.destination,e=g.destination,a=Math.max(v.duration,g.duration),this.isInTransition=!0}else this.options.wheel&&(e=Math.round(e/this.itemHeight)*this.itemHeight,a=this.options.wheel.adjustTime||400);var y=M.swipe;if(this.options.snap){var w=this._nearestSnap(i,e);this.currentPage=w,a=this.options.snapSpeed||Math.max(Math.max(Math.min(Math.abs(i-w.x),1e3),Math.min(Math.abs(e-w.y),1e3)),300),i=w.x,e=w.y,this.directionX=0,this.directionY=0,y=this.options.snap.easing||M.bounce}if(i!==this.x||e!==this.y)return(i>this.minScrollX||ithis.minScrollY||ethis.minScrollY?this.selectedIndex=0:ithis.minScrollX?this.minScrollX:n.leftthis.minScrollY?this.minScrollY:n.topthis.minScrollX?e=this.minScrollX:sthis.minScrollY?o=this.minScrollY:nthis.minScrollX?u=this.minScrollX:uthis.minScrollY?m=this.minScrollY:m ', 45 | dateFormat:['YYYY-MM','YYYY-MM-DD','YYYY-MM-DD hh:mm','YYYY-MM-DD hh:mm:ss','YYYY','MM','DD','hh:mm','hh:mm:ss'],//支持的日期格式 46 | domClass:['rolldate-year','rolldate-month','rolldate-day','rolldate-hour','rolldate-min','rolldate-sec'], 47 | opts:{//插件默认配置 48 | el:'', 49 | format:'YYYY-MM-DD', 50 | beginYear:2000, 51 | endYear:2100, 52 | theme:'', 53 | scrollTime:200, 54 | tapBefore:null, 55 | moveEnd:null, 56 | confirmBefore:null, 57 | confirmEnd:null, 58 | liHeight:40, 59 | minStep:1 60 | } 61 | }; 62 | } 63 | extend(config){ 64 | let _this = this, 65 | opts = _this.baseData().opts; 66 | 67 | for(let key in opts){ 68 | opts[key] = config[key] === 0? 0 : config[key] || opts[key]; 69 | } 70 | _this.config = opts; 71 | } 72 | createUi(){ 73 | let _this = this, 74 | data = _this.baseData(), 75 | index = data.dateFormat.indexOf(_this.config.format); 76 | 77 | index = index > 1? index+1 : index; 78 | let $class = index == 5? [data.domClass[0]]: index ==6? [data.domClass[1]]: index ==7? [data.domClass[2]]: index ==8? data.domClass.slice(3,5): index ==9? data.domClass.slice(3):data.domClass.slice(0,index + 2), 79 | len = $class.length, 80 | ul = '', 81 | el = _this.$(_this.config.el)[0], 82 | date = el.date? el.date:data.date; 83 | 84 | for(let i=0; i
      ' + data.emptyli; 86 | if(i == 0 && index < 6){ 87 | for(let j=_this.config.beginYear; j<=_this.config.endYear; j++){ 88 | ul += ''+ j +'年'; 89 | } 90 | }else if((i == 1 || index == 6) && index < 7){ 91 | for(let k=1; k<=12; k++){ 92 | ul += ''+ (k<10? '0'+k : k) +'月'; 93 | } 94 | }else if((i == 2 || index == 7) && index <= 7){ 95 | let day = _this.bissextile(date.getFullYear(),date.getMonth() + 1); 96 | for(let l=1; l<=day; l++){ 97 | ul += ''+ (l<10? '0'+l : l) +'日'; 98 | } 99 | }else if(i == 3 || (index > 7 && i == 0)){ 100 | for(let m=0; m<=23; m++){ 101 | ul += ''+ (m<10? '0'+m : m) +'时'; 102 | } 103 | }else if(i == 4 || (index > 7 && i == 1)){ 104 | for(let n=0; n<=59; n+=_this.config.minStep){ 105 | ul += ''+ (n<10? '0'+n : n) +'分'; 106 | } 107 | }else if(i == 5 || (index > 7 && i == 2)){ 108 | for(let o=0; o<=59; o++){ 109 | ul += ''+ (o<10? '0'+o : o) +'秒'; 110 | } 111 | } 112 | ul += data.emptyli +'
    ' 113 | } 114 | let $html = `
    115 |
    116 |
    选择日期
    117 |
    118 |
    ${ul}
    119 |
    120 |
    121 | 122 | 123 |
    124 |
    `, 125 | box = document.createElement("div"), 126 | className = index == 0 || index == 8? 'rolldate-two':index == 3? 'rolldate-five':index == 4? 'rolldate-six':index >= 5 && index <= 7? 'rolldate-one':'', 127 | scrollEnd = false; 128 | 129 | box.className = 'rolldate-container ' + className; 130 | box.innerHTML = $html; 131 | document.body.appendChild(box); 132 | _this.setTheme(); 133 | 134 | _this.iscroll = []; 135 | _this.config.liHeight = document.querySelector('.rolldate-frame li').offsetHeight; 136 | 137 | for(let i=0; i'; 162 | } 163 | li = data.emptyli + li + data.emptyli; 164 | _this.$('#'+data.domClass[2]+' ul')[0].innerHTML = li; 165 | if(prevDay > day){ 166 | _this.iscroll[2].scrollToElement(_this.$('#'+data.domClass[2]+' li')[day-1]); 167 | } 168 | } 169 | } 170 | } 171 | }); 172 | let active = _this.$('#'+$class[i]+' .active')[0]; 173 | if(active){ 174 | _this.iscroll[i].scrollToElement(active.previousSibling,_this.config.scrollTime); 175 | } 176 | 177 | } 178 | _this.event(); 179 | 180 | document.body.style.overflow = 'hidden'; 181 | setTimeout(function() { 182 | scrollEnd = true; 183 | }, 1000); 184 | } 185 | $(selector){ 186 | if(typeof selector != 'string' && selector.nodeType){ 187 | return [selector]; 188 | } 189 | return document.querySelectorAll(selector); 190 | } 191 | event(){ 192 | let _this = this, 193 | mask = _this.$('.rolldate-mask')[0], 194 | cancel = _this.$('.rolldate-cancel')[0], 195 | confirm = _this.$('.rolldate-confirm')[0]; 196 | 197 | mask.addEventListener('click', function(){_this.destroy(true);}) 198 | cancel.addEventListener('click', function(){_this.destroy(true);}) 199 | confirm.addEventListener('click', function(){ 200 | let el = _this.$(_this.config.el)[0], 201 | data = _this.baseData(), 202 | date = _this.config.format, 203 | nativeDate = new window.Date(), 204 | index = data.dateFormat.indexOf(date); 205 | 206 | _this.iscroll.forEach(function(v,i){ 207 | let d = _this.getIscrollDay(v), 208 | str; 209 | 210 | if(index <=4){ 211 | str = i == 0? 'YYYY':i == 1? 'MM':i == 2? 'DD':i == 3? 'hh':i == 4? 'mm':'ss'; 212 | }else if(index == 5){ 213 | str = 'MM'; 214 | }else if(index == 6){ 215 | str = 'DD'; 216 | }else if(index == 7){ 217 | str = i == 0? 'hh':i == 1? 'mm':''; 218 | }else if(index == 8){ 219 | str = i == 0? 'hh':i == 1? 'mm':'ss'; 220 | } 221 | 222 | date = date.replace(str,d); 223 | 224 | if(str == 'YYYY'){ 225 | nativeDate.setFullYear(d); 226 | }else if(str == 'MM'){ 227 | nativeDate.setMonth(d-1); 228 | }else if(str == 'DD'){ 229 | nativeDate.setDate(d); 230 | }else if(str == 'hh'){ 231 | nativeDate.setHours(d); 232 | }else if(str == 'mm'){ 233 | nativeDate.setMinutes(d); 234 | }else if(str == 'ss'){ 235 | nativeDate.setSeconds(d); 236 | } 237 | }) 238 | if(_this.config.confirmBefore){ 239 | var flag = _this.config.confirmBefore.call(_this,el,date); 240 | if(flag === false){ 241 | if(_this.config.confirmEnd){_this.config.confirmEnd.call(_this,el,date);} 242 | return false 243 | }else if(flag){ 244 | date = flag; 245 | } 246 | } 247 | if(el.nodeName == 'INPUT'){ 248 | el.value = date; 249 | }else{ 250 | el.innerText = date; 251 | } 252 | if(_this.config.confirmEnd){_this.config.confirmEnd.call(_this,el,date);} 253 | _this.destroy(); 254 | el.date = nativeDate; 255 | }) 256 | 257 | let liHeight = _this.config.liHeight; 258 | 259 | _this.config.queryStyle = function(){ 260 | 261 | window.removeEventListener('resize',_this.config.queryStyle); 262 | setTimeout(function() { 263 | if(_this.$('.rolldate-container')[0] && liHeight != document.querySelector('.rolldate-frame li').offsetHeight){ 264 | _this.destroy(true); 265 | } 266 | }, 0); 267 | }; 268 | window.addEventListener("resize", _this.config.queryStyle, false); 269 | } 270 | bissextile(year,month){ 271 | let day; 272 | if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) { 273 | day = 31 274 | } else if (month == 4 || month == 6 || month == 11 || month == 9) { 275 | day = 30 276 | } else if (month == 2) { 277 | if (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)) { //闰年 278 | day = 29 279 | } else { 280 | day = 28 281 | } 282 | 283 | } 284 | return day; 285 | } 286 | destroy(cancel){ 287 | let _this = this; 288 | 289 | _this.iscroll.forEach(function(v,i){v.destroy();}) 290 | document.body.removeChild(_this.$('.rolldate-container')[0]); 291 | if(cancel&&_this.config.confirmEnd){ 292 | let el = _this.$(_this.config.el)[0]; 293 | 294 | _this.config.confirmEnd.call(_this,el); 295 | } 296 | 297 | if(_this.config.queryStyle){ 298 | window.removeEventListener("resize", _this.config.queryStyle, false); 299 | } 300 | document.body.style.overflow = 'visible'; 301 | } 302 | getIscrollDay(iscroll){ 303 | let _this = this, 304 | liHeight = _this.config.liHeight, 305 | index = Math.abs(iscroll.y%liHeight) !== 0?Math.round(Math.abs(iscroll.y)/liHeight)+1:Math.abs(iscroll.y)/liHeight+1; 306 | 307 | return this.$('#'+iscroll.wrapper.id+' li')[index].innerText.replace(/\D/g,''); 308 | } 309 | setTheme(){ 310 | let _this = this, 311 | theme = _this.config.theme, 312 | defaultTheme = {blue:'#16a1d3',red:'#d91600',green:'#009688',black:'#393D49'}, 313 | header = _this.$('.rolldate-container header')[0], 314 | btn = _this.$('.rolldate-container .rolldate-confirm')[0]; 315 | 316 | if(theme){ 317 | if(defaultTheme[theme]){ 318 | header.style.background = btn.style.background = defaultTheme[theme]; 319 | }else{ 320 | header.style.background = btn.style.background = theme; 321 | } 322 | } 323 | 324 | } 325 | } 326 | export let version = pkg.version; -------------------------------------------------------------------------------- /src/lib/iscroll/index-iscroll5.js: -------------------------------------------------------------------------------- 1 | import './rolldate.less'; 2 | import IScroll from './iscroll/iscroll5'; 3 | let pkg = require('../package.json'); 4 | 5 | export class Date{ 6 | constructor(config){ 7 | if(!config || !config.el){return;} 8 | let _this = this, 9 | el = _this.$(config.el)[0]; 10 | 11 | if(!el){return;} 12 | _this.extend(config); 13 | el.addEventListener('click', function() { 14 | if(el.nodeName == 'INPUT'){el.blur();} 15 | if(_this.config.tapBefore && _this.config.tapBefore.call(_this,el) === false){return false;} 16 | _this.createUi(); 17 | }) 18 | } 19 | baseData(){ 20 | 21 | return { 22 | date:new window.Date(), 23 | emptyli:'
  •  
    • ', 24 | dateFormat:['YYYY-MM','YYYY-MM-DD','YYYY-MM-DD hh:mm','YYYY-MM-DD hh:mm:ss','YYYY'],//支持的日期格式 25 | domClass:['rolldate-year','rolldate-month','rolldate-day','rolldate-hour','rolldate-min','rolldate-sec'], 26 | opts:{//插件默认配置 27 | el:'', 28 | format:'YYYY-MM-DD', 29 | beginYear:2000, 30 | endYear:2100, 31 | theme:'', 32 | tapBefore:null, 33 | moveEnd:null, 34 | confirmBefore:null, 35 | confirmEnd:null 36 | } 37 | }; 38 | } 39 | extend(config){ 40 | let _this = this, 41 | opts = _this.baseData().opts; 42 | 43 | for(let key in opts){ 44 | opts[key] = config[key] || opts[key]; 45 | } 46 | _this.config = opts; 47 | } 48 | createUi(){ 49 | let _this = this, 50 | data = _this.baseData(), 51 | index = data.dateFormat.indexOf(_this.config.format); 52 | 53 | index = index > 1? index+1 : index; 54 | let $class = index == 5? [data.domClass[0]]:data.domClass.slice(0,index + 2), 55 | len = $class.length, 56 | ul = '', 57 | el = _this.$(_this.config.el)[0], 58 | hasDate = !!el.date, 59 | date = hasDate? new window.Date(el.date.replace(/-/g,'/')):data.date; 60 | 61 | for(let i=0; i
      ' + data.emptyli; 63 | if(i == 0){ 64 | for(let j=_this.config.beginYear; j<=_this.config.endYear; j++){ 65 | ul += ''+ j +'年'; 66 | } 67 | }else if(i == 1){ 68 | for(let k=1; k<=12; k++){ 69 | ul += ''+ (k<10? '0'+k : k) +'月'; 70 | } 71 | }else if(i == 2){ 72 | let day = _this.bissextile(date.getFullYear(),date.getMonth() + 1); 73 | for(let l=1; l<=day; l++){ 74 | ul += ''+ (l<10? '0'+l : l) +'日'; 75 | } 76 | }else if(i == 3){ 77 | for(let m=0; m<=23; m++){ 78 | ul += ''+ (m<10? '0'+m : m) +'时'; 79 | } 80 | }else if(i == 4){ 81 | for(let n=0; n<=59; n++){ 82 | ul += ''+ (n<10? '0'+n : n) +'分'; 83 | } 84 | }else if(i == 5){ 85 | for(let o=0; o<=59; o++){ 86 | ul += ''+ (o<10? '0'+o : o) +'秒'; 87 | } 88 | } 89 | ul += data.emptyli +'
    ' 90 | } 91 | let $html = `
    92 |
    93 |
    选择日期
    94 |
    95 |
    ${ul}
    96 |
    97 |
    98 | 99 | 100 |
    101 |
    `, 102 | box = document.createElement("div"), 103 | className = index == 0? 'rolldate-two':index == 3? 'rolldate-five':index == 4? 'rolldate-six':index == 5? 'rolldate-one':''; 104 | 105 | box.className = 'rolldate-container ' + className; 106 | box.innerHTML = $html; 107 | document.body.append(box); 108 | _this.setTheme(); 109 | 110 | _this.iscroll = []; 111 | for(let i=0; i'; 131 | } 132 | li = data.emptyli + li + data.emptyli; 133 | _this.$('.'+data.domClass[2]+' ul')[0].innerHTML = li; 134 | if(prevDay > day){ 135 | _this.iscroll[2].scrollToElement(_this.$('.'+data.domClass[2]+' li')[day-1]); 136 | } 137 | } 138 | } 139 | }); 140 | } 141 | _this.event(); 142 | } 143 | $(selector){ 144 | return document.querySelectorAll(selector); 145 | } 146 | event(){ 147 | let _this = this, 148 | mask = _this.$('.rolldate-mask')[0], 149 | cancel = _this.$('.rolldate-cancel')[0], 150 | confirm = _this.$('.rolldate-confirm')[0]; 151 | 152 | mask.addEventListener('click', function(){_this.destroy();}) 153 | cancel.addEventListener('click', function(){_this.destroy();}) 154 | confirm.addEventListener('click', function(){ 155 | let el = _this.$(_this.config.el)[0], 156 | date = _this.config.format; 157 | 158 | _this.iscroll.forEach(function(v,i){ 159 | let d = _this.getIscrollDay(v), 160 | str = i == 0? 'YYYY':i == 1? 'MM':i == 2? 'DD':i == 3? 'hh':i == 4? 'mm':'ss'; 161 | 162 | date = date.replace(str,d); 163 | }) 164 | el.date = date; 165 | if(_this.config.confirmBefore){ 166 | var flag = _this.config.confirmBefore.call(_this,el,date); 167 | if(flag === false){ 168 | if(_this.config.confirmEnd){_this.config.confirmEnd.call(_this);} 169 | return false 170 | }else if(flag){ 171 | date = flag; 172 | } 173 | } 174 | if(el.nodeName == 'INPUT'){ 175 | el.value = date; 176 | }else{ 177 | el.innerText = date; 178 | } 179 | if(_this.config.confirmEnd){_this.config.confirmEnd();} 180 | _this.destroy(); 181 | }) 182 | } 183 | bissextile(year,month){ 184 | let day; 185 | if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) { 186 | day = 31 187 | } else if (month == 4 || month == 6 || month == 11 || month == 9) { 188 | day = 30 189 | } else if (month == 2) { 190 | if (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)) { //闰年 191 | day = 29 192 | } else { 193 | day = 28 194 | } 195 | 196 | } 197 | return day; 198 | } 199 | destroy(){ 200 | let _this = this; 201 | 202 | _this.iscroll.forEach(function(v,i){v.destroy();}) 203 | document.body.removeChild(_this.$('.rolldate-container')[0]); 204 | } 205 | getIscrollDay(iscroll){ 206 | return this.$('.'+iscroll.wrapper.className+' li')[Math.abs(iscroll.y)/40+1].innerText.replace(/\D/g,''); 207 | } 208 | setTheme(){ 209 | let _this = this, 210 | theme = _this.config.theme, 211 | defaultTheme = {blue:'#16a1d3',red:'#d91600',green:'#009688',black:'#393D49'}, 212 | header = _this.$('.rolldate-container header')[0], 213 | btn = _this.$('.rolldate-container .rolldate-confirm')[0]; 214 | 215 | if(theme){ 216 | if(defaultTheme[theme]){ 217 | header.style.background = btn.style.background = defaultTheme[theme]; 218 | }else{ 219 | header.style.background = btn.style.background = theme; 220 | } 221 | } 222 | 223 | } 224 | } 225 | export let version = pkg.version; -------------------------------------------------------------------------------- /src/lib/iscroll/iscroll.js: -------------------------------------------------------------------------------- 1 | (function(){var m=Math,mround=function(r){return r>>0;},vendor=(/webkit/i).test(navigator.appVersion)?'webkit':(/firefox/i).test(navigator.userAgent)?'Moz':'opera'in window?'O':'',isAndroid=(/android/gi).test(navigator.appVersion),isIDevice=(/iphone|ipad/gi).test(navigator.appVersion),isPlaybook=(/playbook/gi).test(navigator.appVersion),isTouchPad=(/hp-tablet/gi).test(navigator.appVersion),has3d='WebKitCSSMatrix'in window&&'m11'in new WebKitCSSMatrix(),hasTouch='ontouchstart'in window&&!isTouchPad,hasTransform=vendor+'Transform'in document.documentElement.style,hasTransitionEnd=isIDevice||isPlaybook,nextFrame=(function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){return setTimeout(callback,1);}})(),cancelFrame=(function(){return window.cancelRequestAnimationFrame||window.webkitCancelAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame||window.oCancelRequestAnimationFrame||window.msCancelRequestAnimationFrame||clearTimeout})(),RESIZE_EV='onorientationchange'in window?'orientationchange':'resize',START_EV=hasTouch?'touchstart':'mousedown',MOVE_EV=hasTouch?'touchmove':'mousemove',END_EV=hasTouch?'touchend':'mouseup',CANCEL_EV=hasTouch?'touchcancel':'mouseup',WHEEL_EV=vendor=='Moz'?'DOMMouseScroll':'mousewheel',trnOpen='translate'+(has3d?'3d(':'('),trnClose=has3d?',0)':')',iScroll=function(el,options){var that=this,doc=document,i;that.wrapper=typeof el=='object'?el:doc.getElementById(el);that.wrapper.style.overflow='hidden';that.scroller=that.wrapper.children[0];that.options={hScroll:true,vScroll:true,x:0,y:0,bounce:true,bounceLock:false,momentum:true,lockDirection:true,useTransform:true,useTransition:false,topOffset:0,checkDOMChanges:false,hScrollbar:true,vScrollbar:true,fixedScrollbar:isAndroid,hideScrollbar:isIDevice,fadeScrollbar:isIDevice&&has3d,scrollbarClass:'',zoom:false,zoomMin:1,zoomMax:4,doubleTapZoom:2,wheelAction:'scroll',snap:false,snapThreshold:1,onRefresh:null,onBeforeScrollStart:function(e){e.preventDefault();},onScrollStart:null,onBeforeScrollMove:null,onScrollMove:null,onBeforeScrollEnd:null,onScrollEnd:null,onTouchEnd:null,onDestroy:null,onZoomStart:null,onZoom:null,onZoomEnd:null};for(i in options)that.options[i]=options[i];that.x=that.options.x;that.y=that.options.y;that.options.useTransform=hasTransform?that.options.useTransform:false;that.options.hScrollbar=that.options.hScroll&&that.options.hScrollbar;that.options.vScrollbar=that.options.vScroll&&that.options.vScrollbar;that.options.zoom=that.options.useTransform&&that.options.zoom;that.options.useTransition=hasTransitionEnd&&that.options.useTransition;if(that.options.zoom&&isAndroid){trnOpen='translate(';trnClose=')';} 2 | that.scroller.style[vendor+'TransitionProperty']=that.options.useTransform?'-'+vendor.toLowerCase()+'-transform':'top left';that.scroller.style[vendor+'TransitionDuration']='0';that.scroller.style[vendor+'TransformOrigin']='0 0';if(that.options.useTransition)that.scroller.style[vendor+'TransitionTimingFunction']='cubic-bezier(0.33,0.66,0.66,1)';if(that.options.useTransform)that.scroller.style[vendor+'Transform']=trnOpen+that.x+'px,'+that.y+'px'+trnClose;else that.scroller.style.cssText+=';position:absolute;top:'+that.y+'px;left:'+that.x+'px';if(that.options.useTransition)that.options.fixedScrollbar=true;that.refresh();that._bind(RESIZE_EV,window);that._bind(START_EV);if(!hasTouch){that._bind('mouseout',that.wrapper);if(that.options.wheelAction!='none') 3 | that._bind(WHEEL_EV);} 4 | if(that.options.checkDOMChanges)that.checkDOMTime=setInterval(function(){that._checkDOMChanges();},500);};iScroll.prototype={enabled:true,x:0,y:0,steps:[],scale:1,currPageX:0,currPageY:0,pagesX:[],pagesY:[],aniTime:null,wheelZoomCount:0,handleEvent:function(e){var that=this;switch(e.type){case START_EV:if(!hasTouch&&e.button!==0)return;that._start(e);break;case MOVE_EV:that._move(e);break;case END_EV:case CANCEL_EV:that._end(e);break;case RESIZE_EV:that._resize();break;case WHEEL_EV:that._wheel(e);break;case'mouseout':that._mouseout(e);break;case'webkitTransitionEnd':that._transitionEnd(e);break;}},_checkDOMChanges:function(){if(this.moved||this.zoomed||this.animating||(this.scrollerW==this.scroller.offsetWidth*this.scale&&this.scrollerH==this.scroller.offsetHeight*this.scale))return;this.refresh();},_scrollbar:function(dir){var that=this,doc=document,bar;if(!that[dir+'Scrollbar']){if(that[dir+'ScrollbarWrapper']){if(hasTransform)that[dir+'ScrollbarIndicator'].style[vendor+'Transform']='';that[dir+'ScrollbarWrapper'].parentNode.removeChild(that[dir+'ScrollbarWrapper']);that[dir+'ScrollbarWrapper']=null;that[dir+'ScrollbarIndicator']=null;} 5 | return;} 6 | if(!that[dir+'ScrollbarWrapper']){bar=doc.createElement('div');if(that.options.scrollbarClass)bar.className=that.options.scrollbarClass+dir.toUpperCase();else bar.style.cssText='position:absolute;z-index:100;'+(dir=='h'?'height:7px;bottom:1px;left:2px;right:'+(that.vScrollbar?'7':'2')+'px':'width:7px;bottom:'+(that.hScrollbar?'7':'2')+'px;top:2px;right:1px');bar.style.cssText+=';pointer-events:none;-'+vendor+'-transition-property:opacity;-'+vendor+'-transition-duration:'+(that.options.fadeScrollbar?'350ms':'0')+';overflow:hidden;opacity:'+(that.options.hideScrollbar?'0':'1');that.wrapper.appendChild(bar);that[dir+'ScrollbarWrapper']=bar;bar=doc.createElement('div');if(!that.options.scrollbarClass){bar.style.cssText='position:absolute;z-index:100;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.9);-'+vendor+'-background-clip:padding-box;-'+vendor+'-box-sizing:border-box;'+(dir=='h'?'height:100%':'width:100%')+';-'+vendor+'-border-radius:3px;border-radius:3px';} 7 | bar.style.cssText+=';pointer-events:none;-'+vendor+'-transition-property:-'+vendor+'-transform;-'+vendor+'-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1);-'+vendor+'-transition-duration:0;-'+vendor+'-transform:'+trnOpen+'0,0'+trnClose;if(that.options.useTransition)bar.style.cssText+=';-'+vendor+'-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1)';that[dir+'ScrollbarWrapper'].appendChild(bar);that[dir+'ScrollbarIndicator']=bar;} 8 | if(dir=='h'){that.hScrollbarSize=that.hScrollbarWrapper.clientWidth;that.hScrollbarIndicatorSize=m.max(mround(that.hScrollbarSize*that.hScrollbarSize/that.scrollerW),8);that.hScrollbarIndicator.style.width=that.hScrollbarIndicatorSize+'px';that.hScrollbarMaxScroll=that.hScrollbarSize-that.hScrollbarIndicatorSize;that.hScrollbarProp=that.hScrollbarMaxScroll/that.maxScrollX;}else{that.vScrollbarSize=that.vScrollbarWrapper.clientHeight;that.vScrollbarIndicatorSize=m.max(mround(that.vScrollbarSize*that.vScrollbarSize/that.scrollerH),8);that.vScrollbarIndicator.style.height=that.vScrollbarIndicatorSize+'px';that.vScrollbarMaxScroll=that.vScrollbarSize-that.vScrollbarIndicatorSize;that.vScrollbarProp=that.vScrollbarMaxScroll/that.maxScrollY;} 9 | that._scrollbarPos(dir,true);},_resize:function(){var that=this;setTimeout(function(){that.refresh();},isAndroid?200:0);},_pos:function(x,y){x=this.hScroll?x:0;y=this.vScroll?y:0;if(this.options.useTransform){this.scroller.style[vendor+'Transform']=trnOpen+x+'px,'+y+'px'+trnClose+' scale('+this.scale+')';}else{x=mround(x);y=mround(y);this.scroller.style.left=x+'px';this.scroller.style.top=y+'px';} 10 | this.x=x;this.y=y;this._scrollbarPos('h');this._scrollbarPos('v');},_scrollbarPos:function(dir,hidden){var that=this,pos=dir=='h'?that.x:that.y,size;if(!that[dir+'Scrollbar'])return;pos=that[dir+'ScrollbarProp']*pos;if(pos<0){if(!that.options.fixedScrollbar){size=that[dir+'ScrollbarIndicatorSize']+mround(pos*3);if(size<8)size=8;that[dir+'ScrollbarIndicator'].style[dir=='h'?'width':'height']=size+'px';} 11 | pos=0;}else if(pos>that[dir+'ScrollbarMaxScroll']){if(!that.options.fixedScrollbar){size=that[dir+'ScrollbarIndicatorSize']-mround((pos-that[dir+'ScrollbarMaxScroll'])*3);if(size<8)size=8;that[dir+'ScrollbarIndicator'].style[dir=='h'?'width':'height']=size+'px';pos=that[dir+'ScrollbarMaxScroll']+(that[dir+'ScrollbarIndicatorSize']-size);}else{pos=that[dir+'ScrollbarMaxScroll'];}} 12 | that[dir+'ScrollbarWrapper'].style[vendor+'TransitionDelay']='0';that[dir+'ScrollbarWrapper'].style.opacity=hidden&&that.options.hideScrollbar?'0':'1';that[dir+'ScrollbarIndicator'].style[vendor+'Transform']=trnOpen+(dir=='h'?pos+'px,0':'0,'+pos+'px')+trnClose;},_start:function(e){var that=this,point=hasTouch?e.touches[0]:e,matrix,x,y,c1,c2;if(!that.enabled)return;if(that.options.onBeforeScrollStart)that.options.onBeforeScrollStart.call(that,e);if(that.options.useTransition||that.options.zoom)that._transitionTime(0);that.moved=false;that.animating=false;that.zoomed=false;that.distX=0;that.distY=0;that.absDistX=0;that.absDistY=0;that.dirX=0;that.dirY=0;if(that.options.zoom&&hasTouch&&e.touches.length>1){c1=m.abs(e.touches[0].pageX-e.touches[1].pageX);c2=m.abs(e.touches[0].pageY-e.touches[1].pageY);that.touchesDistStart=m.sqrt(c1*c1+c2*c2);that.originX=m.abs(e.touches[0].pageX+e.touches[1].pageX-that.wrapperOffsetLeft*2)/2-that.x;that.originY=m.abs(e.touches[0].pageY+e.touches[1].pageY-that.wrapperOffsetTop*2)/2-that.y;if(that.options.onZoomStart)that.options.onZoomStart.call(that,e);} 13 | if(that.options.momentum){if(that.options.useTransform){matrix=getComputedStyle(that.scroller,null)[vendor+'Transform'].replace(/[^0-9-.,]/g,'').split(',');x=matrix[4]*1;y=matrix[5]*1;}else{x=getComputedStyle(that.scroller,null).left.replace(/[^0-9-]/g,'')*1;y=getComputedStyle(that.scroller,null).top.replace(/[^0-9-]/g,'')*1;} 14 | if(x!=that.x||y!=that.y){if(that.options.useTransition)that._unbind('webkitTransitionEnd');else cancelFrame(that.aniTime);that.steps=[];that._pos(x,y);}} 15 | that.absStartX=that.x;that.absStartY=that.y;that.startX=that.x;that.startY=that.y;that.pointX=point.pageX;that.pointY=point.pageY;that.startTime=e.timeStamp||Date.now();if(that.options.onScrollStart)that.options.onScrollStart.call(that,e);that._bind(MOVE_EV);that._bind(END_EV);that._bind(CANCEL_EV);},_move:function(e){var that=this,point=hasTouch?e.touches[0]:e,deltaX=point.pageX-that.pointX,deltaY=point.pageY-that.pointY,newX=that.x+deltaX,newY=that.y+deltaY,c1,c2,scale,timestamp=e.timeStamp||Date.now();if(that.options.onBeforeScrollMove)that.options.onBeforeScrollMove.call(that,e);if(that.options.zoom&&hasTouch&&e.touches.length>1){c1=m.abs(e.touches[0].pageX-e.touches[1].pageX);c2=m.abs(e.touches[0].pageY-e.touches[1].pageY);that.touchesDist=m.sqrt(c1*c1+c2*c2);that.zoomed=true;scale=1/that.touchesDistStart*that.touchesDist*this.scale;if(scalethat.options.zoomMax)scale=2.0*that.options.zoomMax*Math.pow(0.5,that.options.zoomMax/scale);that.lastScale=scale/this.scale;newX=this.originX-this.originX*that.lastScale+this.x,newY=this.originY-this.originY*that.lastScale+this.y;this.scroller.style[vendor+'Transform']=trnOpen+newX+'px,'+newY+'px'+trnClose+' scale('+scale+')';if(that.options.onZoom)that.options.onZoom.call(that,e);return;} 16 | that.pointX=point.pageX;that.pointY=point.pageY;if(newX>0||newX=0||that.maxScrollX>=0?0:that.maxScrollX;} 17 | if(newY>that.minScrollY||newY=that.minScrollY||that.maxScrollY>=0?that.minScrollY:that.maxScrollY;} 18 | if(that.absDistX<6&&that.absDistY<6){that.distX+=deltaX;that.distY+=deltaY;that.absDistX=m.abs(that.distX);that.absDistY=m.abs(that.distY);return;} 19 | if(that.options.lockDirection){if(that.absDistX>that.absDistY+5){newY=that.y;deltaY=0;}else if(that.absDistY>that.absDistX+5){newX=that.x;deltaX=0;}} 20 | that.moved=true;that._pos(newX,newY);that.dirX=deltaX>0?-1:deltaX<0?1:0;that.dirY=deltaY>0?-1:deltaY<0?1:0;if(timestamp-that.startTime>300){that.startTime=timestamp;that.startX=that.x;that.startY=that.y;} 21 | if(that.options.onScrollMove)that.options.onScrollMove.call(that,e);},_end:function(e){if(hasTouch&&e.touches.length!=0)return;var that=this,point=hasTouch?e.changedTouches[0]:e,target,ev,momentumX={dist:0,time:0},momentumY={dist:0,time:0},duration=(e.timeStamp||Date.now())-that.startTime,newPosX=that.x,newPosY=that.y,distX,distY,newDuration,snap,scale;that._unbind(MOVE_EV);that._unbind(END_EV);that._unbind(CANCEL_EV);if(that.options.onBeforeScrollEnd)that.options.onBeforeScrollEnd.call(that,e);if(that.zoomed){scale=that.scale*that.lastScale;scale=Math.max(that.options.zoomMin,scale);scale=Math.min(that.options.zoomMax,scale);that.lastScale=scale/that.scale;that.scale=scale;that.x=that.originX-that.originX*that.lastScale+that.x;that.y=that.originY-that.originY*that.lastScale+that.y;that.scroller.style[vendor+'TransitionDuration']='200ms';that.scroller.style[vendor+'Transform']=trnOpen+that.x+'px,'+that.y+'px'+trnClose+' scale('+that.scale+')';that.zoomed=false;that.refresh();if(that.options.onZoomEnd)that.options.onZoomEnd.call(that,e);return;} 22 | if(!that.moved){if(hasTouch){if(that.doubleTapTimer&&that.options.zoom){clearTimeout(that.doubleTapTimer);that.doubleTapTimer=null;if(that.options.onZoomStart)that.options.onZoomStart.call(that,e);that.zoom(that.pointX,that.pointY,that.scale==1?that.options.doubleTapZoom:1);if(that.options.onZoomEnd){setTimeout(function(){that.options.onZoomEnd.call(that,e);},200);}}else{that.doubleTapTimer=setTimeout(function(){that.doubleTapTimer=null;target=point.target;while(target.nodeType!=1)target=target.parentNode;if(target.tagName!='SELECT'&&target.tagName!='INPUT'&&target.tagName!='TEXTAREA'){ev=document.createEvent('MouseEvents');ev.initMouseEvent('click',true,true,e.view,1,point.screenX,point.screenY,point.clientX,point.clientY,e.ctrlKey,e.altKey,e.shiftKey,e.metaKey,0,null);ev._fake=true;target.dispatchEvent(ev);}},that.options.zoom?250:0);}} 23 | that._resetPos(200);if(that.options.onTouchEnd)that.options.onTouchEnd.call(that,e);return;} 24 | if(duration<300&&that.options.momentum){momentumX=newPosX?that._momentum(newPosX-that.startX,duration,-that.x,that.scrollerW-that.wrapperW+that.x,that.options.bounce?that.wrapperW:0):momentumX;momentumY=newPosY?that._momentum(newPosY-that.startY,duration,-that.y,(that.maxScrollY<0?that.scrollerH-that.wrapperH+that.y-that.minScrollY:0),that.options.bounce?that.wrapperH:0):momentumY;newPosX=that.x+momentumX.dist;newPosY=that.y+momentumY.dist;if((that.x>0&&newPosX>0)||(that.xthat.minScrollY&&newPosY>that.minScrollY)||(that.y=0?0:that.x=that.minScrollY||that.maxScrollY>0?that.minScrollY:that.ythat.options.zoomMax)deltaScale=that.options.zoomMax;if(deltaScale!=that.scale){if(!that.wheelZoomCount&&that.options.onZoomStart)that.options.onZoomStart.call(that,e);that.wheelZoomCount++;that.zoom(e.pageX,e.pageY,deltaScale,400);setTimeout(function(){that.wheelZoomCount--;if(!that.wheelZoomCount&&that.options.onZoomEnd)that.options.onZoomEnd.call(that,e);},400);} 36 | return;} 37 | deltaX=that.x+wheelDeltaX;deltaY=that.y+wheelDeltaY;if(deltaX>0)deltaX=0;else if(deltaXthat.minScrollY)deltaY=that.minScrollY;else if(deltaY=startTime+step.time){that._pos(step.x,step.y);that.animating=false;if(that.options.onAnimationEnd)that.options.onAnimationEnd.call(that);that._startAni();return;} 41 | now=(now-startTime)/step.time-1;easeOut=m.sqrt(1-now*now);newX=(step.x-startX)*easeOut+startX;newY=(step.y-startY)*easeOut+startY;that._pos(newX,newY);if(that.animating)that.aniTime=nextFrame(animate);};animate();},_transitionTime:function(time){time+='ms';this.scroller.style[vendor+'TransitionDuration']=time;if(this.hScrollbar)this.hScrollbarIndicator.style[vendor+'TransitionDuration']=time;if(this.vScrollbar)this.vScrollbarIndicator.style[vendor+'TransitionDuration']=time;},_momentum:function(dist,time,maxDistUpper,maxDistLower,size){var deceleration=0.0006,speed=m.abs(dist)/time,newDist=(speed*speed)/(2*deceleration),newTime=0,outsideDist=0;if(dist>0&&newDist>maxDistUpper){outsideDist=size/(6/(newDist/speed*deceleration));maxDistUpper=maxDistUpper+outsideDist;speed=speed*maxDistUpper/newDist;newDist=maxDistUpper;}else if(dist<0&&newDist>maxDistLower){outsideDist=size/(6/(newDist/speed*deceleration));maxDistLower=maxDistLower+outsideDist;speed=speed*maxDistLower/newDist;newDist=maxDistLower;} 42 | newDist=newDist*(dist<0?-1:1);newTime=speed/deceleration;return{dist:newDist,time:mround(newTime)};},_offset:function(el){var left=-el.offsetLeft,top=-el.offsetTop;while(el=el.offsetParent){left-=el.offsetLeft;top-=el.offsetTop;} 43 | if(el!=this.wrapper){left*=this.scale;top*=this.scale;} 44 | return{left:left,top:top};},_snap:function(x,y){var that=this,i,l,page,time,sizeX,sizeY;page=that.pagesX.length-1;for(i=0,l=that.pagesX.length;i=that.pagesX[i]){page=i;break;}} 45 | if(page==that.currPageX&&page>0&&that.dirX<0)page--;x=that.pagesX[page];sizeX=m.abs(x-that.pagesX[that.currPageX]);sizeX=sizeX?m.abs(that.x-x)/sizeX*500:0;that.currPageX=page;page=that.pagesY.length-1;for(i=0;i=that.pagesY[i]){page=i;break;}} 46 | if(page==that.currPageY&&page>0&&that.dirY<0)page--;y=that.pagesY[page];sizeY=m.abs(y-that.pagesY[that.currPageY]);sizeY=sizeY?m.abs(that.y-y)/sizeY*500:0;that.currPageY=page;time=mround(m.max(sizeX,sizeY))||200;return{x:x,y:y,time:time};},_bind:function(type,el,bubble){(el||this.scroller).addEventListener(type,this,!!bubble);},_unbind:function(type,el,bubble){(el||this.scroller).removeEventListener(type,this,!!bubble);},destroy:function(){var that=this;that.scroller.style[vendor+'Transform']='';that.hScrollbar=false;that.vScrollbar=false;that._scrollbar('h');that._scrollbar('v');that._unbind(RESIZE_EV,window);that._unbind(START_EV);that._unbind(MOVE_EV);that._unbind(END_EV);that._unbind(CANCEL_EV);if(!that.options.hasTouch){that._unbind('mouseout',that.wrapper);that._unbind(WHEEL_EV);} 47 | if(that.options.useTransition)that._unbind('webkitTransitionEnd');if(that.options.checkDOMChanges)clearInterval(that.checkDOMTime);if(that.options.onDestroy)that.options.onDestroy.call(that);},refresh:function(){var that=this,offset,i,l,els,pos=0,page=0;if(that.scalethat.wrapperH);that.hScrollbar=that.hScroll&&that.options.hScrollbar;that.vScrollbar=that.vScroll&&that.options.vScrollbar&&that.scrollerH>that.wrapperH;offset=that._offset(that.wrapper);that.wrapperOffsetLeft=-offset.left;that.wrapperOffsetTop=-offset.top;if(typeof that.options.snap=='string'){that.pagesX=[];that.pagesY=[];els=that.scroller.querySelectorAll(that.options.snap);for(i=0,l=els.length;i=that.maxScrollX){that.pagesX[page]=pos;pos=pos-that.wrapperW;page++;} 48 | if(that.maxScrollX%that.wrapperW)that.pagesX[that.pagesX.length]=that.maxScrollX-that.pagesX[that.pagesX.length-1]+that.pagesX[that.pagesX.length-1];pos=0;page=0;that.pagesY=[];while(pos>=that.maxScrollY){that.pagesY[page]=pos;pos=pos-that.wrapperH;page++;} 49 | if(that.maxScrollY%that.wrapperH)that.pagesY[that.pagesY.length]=that.maxScrollY-that.pagesY[that.pagesY.length-1]+that.pagesY[that.pagesY.length-1];} 50 | that._scrollbar('h');that._scrollbar('v');if(!that.zoomed){that.scroller.style[vendor+'TransitionDuration']='0';that._resetPos(200);}},scrollTo:function(x,y,time,relative){var that=this,step=x,i,l;that.stop();if(!step.length)step=[{x:x,y:y,time:time,relative:relative}];for(i=0,l=step.length;i0?0:pos.leftthat.minScrollY?that.minScrollY:pos.topthat.pagesX.length-1?that.pagesX.length-1:pageX;pageY=pageY<0?0:pageY>that.pagesY.length-1?that.pagesY.length-1:pageY;that.currPageX=pageX;that.currPageY=pageY;x=that.pagesX[pageX];y=that.pagesY[pageY];}else{x=-that.wrapperW*pageX;y=-that.wrapperH*pageY;if(x0?0:that.xthat.minScrollY?that.minScrollY:that.y