├── .gitignore
├── .eslintignore
├── .babelrc
├── src
    ├── main.js
    ├── components
    │   ├── footer
    │   │   └── footer.vue
    │   └── datepickerMobile
    │   │   ├── pickerMobile.scss
    │   │   └── pickerMobile.vue
    └── view
    │   └── pickerMobile
    │       └── mobilePickerDemo.vue
├── .editorconfig
├── .eslintrc.js
├── config
    └── index.js
├── README.md
├── LICENSE
├── static
    └── style
    │   └── coreCss
    │       ├── px2rem.scss
    │       └── reset.scss
├── package.json
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | dist


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/*.js
2 | config/*.js
3 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2"],
3 |   "plugins": ["transform-runtime"],
4 |   "comments": false
5 | }
6 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import picker from './view/pickerMobile/mobilePickerDemo'
3 | 
4 | new Vue({
5 |   render (h) {
6 |     return h(picker)
7 |   }
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/src/components/footer/footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="footer">
 3 |         <div>蜀ICP备15002031号-1</div>
 4 |         <div>Copyright © Yi Xiong 2013 - 2017</div>
 5 |     </div>
 6 | </template>
 7 | <style scoped>
 8 |     .footer{
 9 |         font-size: 0.2rem;
10 |         color: #c8c7cc;
11 |         text-align: center;
12 |         padding: 0.3rem 0;
13 |     }
14 | </style>
15 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // http://eslint.org/docs/user-guide/configuring
 2 | module.exports = {
 3 |   root: true,
 4 |   parser: 'babel-eslint',
 5 |   parserOptions: {
 6 |     sourceType: 'module'
 7 |   },
 8 |   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
 9 |   extends: 'standard',
10 |   // required to lint *.vue files
11 |   plugins: [
12 |     'html'
13 |   ],
14 |   // add your custom rules here
15 |   'rules': {
16 |     // allow paren-less arrow functions
17 |     'arrow-parens': 0,
18 |     // allow async-await
19 |     'generator-star-spacing': 0,
20 |     // allow debugger during development
21 |     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | const path=require('path');
 2 | 
 3 | module.exports={
 4 |     build:{
 5 |         env:{
 6 |             NODE_ENV:'"production"'
 7 |         },
 8 |         indexHtml:path.resolve(__dirname,'../dist/index.html'),
 9 |         staticRoot:path.resolve(__dirname,'../dist'),
10 |         staticSubDirectory:'static',
11 |         staticPublishPath:'',
12 |         productionSourceMap:false,
13 |     },
14 |     dev:{
15 |         env:{
16 |             NODE_ENV:'"development"'
17 |         },
18 |         port:8080,
19 |         autoOpenBrowser:true,
20 |         staticSubDirectory:'static',
21 |         staticPublishPath:'/',
22 |         proxyTable: {},
23 |         cssSourceMap: true
24 |     }
25 | }
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # do no use this in your production environment！！！
 2 | ## this project is no longer updated ,please use [this](https://github.com/k186/iosSelect) instead
 3 | 
 4 | 
 5 | ### vue deatePicker for mobile component
 6 | 
 7 | ### [demo](http://k186studio.com/demos/vue/mobilePicker/)
 8 | 
 9 | 
10 | ###Build Setup
11 | ```$xslt
12 | # install dependencies
13 | npm install
14 | 
15 | # serve with hot reload at localhost:8080
16 | npm run dev
17 | 
18 | # build for production with minification
19 | npm run build
20 | ```
21 | ### props config
22 | ```$xslt
23 |   valueStr: {
24 |     type: String,
25 |     default: ''
26 |   },
27 |   visible: {
28 |     type: Boolean,
29 |     default: false,
30 |     required: true
31 |   },
32 |   options: {
33 |     type: Object
34 |   }
35 | ```
36 | 
37 | >`valueStr`: the init date value like 2017-3-7 14:50
38 | 
39 | >`visible`: without use vuex ,so you need control picker visible by yourself
40 | 
41 | >`selectDay`:callback function
42 | 
43 | #[example](https://github.com/k186/vue-wheel-scroll-datepikcer/blob/master/src/view/pickerMobile/mobilePickerDemo.vue)
44 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "vue-wheel-scroll-datepikcer"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/static/style/coreCss/px2rem.scss:
--------------------------------------------------------------------------------
 1 | //function way
 2 | @function px2rem($px, $base-font-size: 75px) {
 3 |     @if (unitless($px)) {
 4 |     @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
 5 |     @return px2rem($px + 0px); // That may fail.
 6 |     } @else if (unit($px) == rem) {
 7 | @return $px;
 8 | }
 9 |     @return ($px / $base-font-size) * 1rem;
10 | }
11 | //mixin way
12 | @mixin px2rem($property,$px-values,$baseline-px:75px,$support-for-ie:false){
13 | //Conver the baseline into rems
14 |   $baseline-rem: $baseline-px / 1rem * 1;
15 | //Print the first line in pixel values
16 |     @if $support-for-ie {
17 |         #{$property}: $px-values;
18 |     }
19 | //if there is only one (numeric) value, return the property/value line for it.
20 |     @if type-of($px-values) == "number"{
21 |         #{$property}: $px-values / $baseline-rem;
22 |     }
23 |     @else {
24 |     //Create an empty list that we can dump values into
25 |   $rem-values:();
26 |         @each $value in $px-values{
27 |         // If the value is zero or not a number, return it
28 |             @if $value == 0 or type-of($value) != "number"{
29 |                 $rem-values: append($rem-values, $value / $baseline-rem);
30 |             }
31 |         }
32 |     // Return the property and its list of converted values
33 |        #{$property}: $rem-values;
34 |     }
35 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-wheel-scroll-datepikcer",
 3 |   "version": "1.0.0",
 4 |   "description": "vue v2.0 , mobile datePicker",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build": "node build/build.js",
 8 |     "dev": "node build/dev-server.js"
 9 |   },
10 |   "keywords": ["vue","datepicker"],
11 |   "author": "k186(k1868548@gmail.com)",
12 |   "license": "ISC",
13 |   "dependencies": {
14 |     "vue": "^2.2.1",
15 |     "webpack": "^2.2.1"
16 |   },
17 |   "devDependencies": {
18 |     "autoprefixer": "^6.7.6",
19 |     "babel-core": "^6.23.1",
20 |     "babel-eslint": "^7.1.1",
21 |     "babel-loader": "^6.3.2",
22 |     "babel-plugin-transform-runtime": "^6.23.0",
23 |     "babel-preset-es2015": "^6.22.0",
24 |     "babel-preset-stage-2": "^6.22.0",
25 |     "babel-register": "^6.23.0",
26 | 
27 |     "extract-text-webpack-plugin": "^2.0.0",
28 |     "optimize-css-assets-webpack-plugin": "^1.3.0",
29 | 
30 |     "eslint": "^3.14.1",
31 |     "eslint-friendly-formatter": "^2.0.7",
32 |     "eslint-loader": "^1.6.1",
33 |     "eslint-plugin-html": "^2.0.0",
34 |     "eslint-config-standard": "^6.2.1",
35 |     "eslint-plugin-promise": "^3.4.0",
36 |     "eslint-plugin-standard": "^2.0.1",
37 | 
38 |     "html-webpack-plugin": "^2.28.0",
39 | 
40 |     "shelljs": "^0.7.6",
41 |     "file-loader": "^0.10.1",
42 |     "style-loader": "^0.13.2",
43 |     "css-loader": "^0.26.2",
44 |     "url-loader": "^0.5.8",
45 |     "vue-loader": "^11.1.4",
46 |     "vue-template-compiler": "^2.2.1",
47 |     "node-sass": "^4.5.0",
48 |     "sass-loader": "^6.0.2",
49 | 
50 |     "express": "^4.15.0",
51 |     "webpack-dev-middleware": "^1.10.1",
52 |     "webpack-hot-middleware": "^2.17.1",
53 |     "friendly-errors-webpack-plugin": "^1.6.1",
54 |     "opn": "^4.0.2",
55 |     "ora": "^1.1.0",
56 |     "chalk": "^1.1.3",
57 |     "webpack-merge": "^3.0.0",
58 |     "connect-history-api-fallback": "^1.3.0"
59 |   },
60 |   "browserlist": [
61 |     "> 1%",
62 |     "last 2 versions",
63 |     "not ie <= 8"
64 |   ]
65 | }
66 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>mobile date picker</title>
 6 |   <meta name="format-detection" content="telephone=no" />
 7 |   <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">-->
 8 |   <script type="text/javascript">
 9 |     ;(function(a,b){var c=a.document;var d=c.documentElement;var e=c.querySelector('meta[name=viewport]');var f=c.querySelector('meta[name=H5fit]');var g=0;var h=a.devicePixelRatio;var i=0;var j;var k=b||(b={});if(e){console.warn('根据自定义的meta标签设置缩放');var l=e.getAttribute('content').match(/initial\-scale=([\d\.])/);if(l){i=parseFloat(l[1]);g=parseInt(1/i);}}else if(f){var l=f.getAttribute('content');if(l){var m=l.match(/initial\-dpr=([\d\.])/);var n=l.match(/maximum\-dpr=(\d\.)/);if(m){g=parseFloat(m[1]);i=parseFloat((1/g).toFixed(2))};if(n){g=parseFloat(n[1])>h?parseFloat(n[1]):h;i=parseFloat((1/g).toFixed(2))}}};if(!g&&!i){if(h){g=h};i=1/g};d.setAttribute('data-dpr',g);if(!e){e=c.createElement('meta');e.setAttribute('name','viewport');e.setAttribute('content','initial-scale='+i+', maximum-scale='+i+', minimum-scale='+i+', user-scalable=no');if(d.firstElementChild){d.firstElementChild.appendChild(e)}else{var l=c.createElement('div');l.appendChild('metaEl');c.write(l.innerHTML);}};k.refreshRem=function(){var l=d.getBoundingClientRect().width;var m=l/10;d.style.fontSize=m+'px';k.rem=a.rem=m};k.rem2px=function(l){var m=parseFloat(l)*this.rem;if(typeof l==='string'&&l.match(/rem$/)){m+='px'};return m};k.px2rem=function(l){var m=parseFloat(l)/this.rem;if(typeof l==='string'&&l.match(/px$/)){m+='rem'};return m};a.addEventListener('resize',function(){clearTimeout(j);j=setTimeout(k.refreshRem,300)},false);a.addEventListener('pageshow',function(l){if(l.persisted){clearTimeout(j);j=setTimeout(k.refreshRem,300)}},false);if(c.readyState==='complete'){c.body.style.fontSize=12*g+'px'}else{c.addEventListener('DOMContentLoaded',function(l){c.body.style.fontSize=12*g+'px'},false)};k.refreshRem();k.dpr=a.dpr=g})(window,window['H5fit']||(window['H5fit']={}));
10 |   </script>
11 | </head>
12 | <body>
13 | <div id="app"></div>
14 | <!-- built files will be auto injected -->
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/static/style/coreCss/reset.scss:
--------------------------------------------------------------------------------
  1 | html, body, div, span, object, iframe,
  2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3 | abbr, address, cite, code,
  4 | del, dfn, em, img, ins, kbd, q, samp,
  5 | small, strong, sub, sup, var,
  6 | b, i,
  7 | dl, dt, dd, ol, ul, li,
  8 | fieldset, form, label, legend,
  9 | table, caption, tbody, tfoot, thead, tr, th, td,
 10 | article, aside, canvas, details, figcaption, figure,
 11 | footer, header, hgroup, menu, nav, section, summary,
 12 | time, mark, audio, video {
 13 |     margin: 0;
 14 |     padding: 0;
 15 |     border: 0;
 16 |     outline: 0;
 17 |     vertical-align: baseline;
 18 | }
 19 | 
 20 | body {
 21 |     line-height: 1;
 22 |     -webkit-user-select: none;
 23 |     -moz-user-select: none;
 24 |     -ms-user-select: none;
 25 |     user-select: none;
 26 | }
 27 | 
 28 | article, aside, details, figcaption, figure,
 29 | footer, header, hgroup, menu, nav, section {
 30 |     display: block;
 31 | }
 32 | 
 33 | ul {
 34 |     list-style: none;
 35 | }
 36 | 
 37 | blockquote, q {
 38 |     quotes: none;
 39 | }
 40 | 
 41 | blockquote:before, blockquote:after,
 42 | q:before, q:after {
 43 |     content: '';
 44 |     content: none;
 45 | }
 46 | 
 47 | a {
 48 |     margin: 0;
 49 |     padding: 0;
 50 |     font-size: 1rem;
 51 |     vertical-align: baseline;
 52 |     background: transparent;
 53 | }
 54 | 
 55 | /* change colours to suit your needs */
 56 | ins {
 57 |     background-color: #ff9;
 58 |     color: #000;
 59 |     text-decoration: none;
 60 | }
 61 | 
 62 | /* change colours to suit your needs */
 63 | mark {
 64 |     background-color: #ff9;
 65 |     color: #000;
 66 |     font-style: italic;
 67 |     font-weight: bold;
 68 | }
 69 | 
 70 | del {
 71 |     text-decoration: line-through;
 72 | }
 73 | 
 74 | abbr[title], dfn[title] {
 75 |     border-bottom: 1px dotted;
 76 |     cursor: help;
 77 | }
 78 | 
 79 | table {
 80 |     border-collapse: collapse;
 81 |     border-spacing: 0;
 82 | }
 83 | 
 84 | /* change border colour to suit your needs */
 85 | hr {
 86 |     display: block;
 87 |     height: 1px;
 88 |     border: 0;
 89 |     border-top: 1px solid #cccccc;
 90 |     margin: 1em 0;
 91 |     padding: 0;
 92 | }
 93 | 
 94 | input, select {
 95 |     vertical-align: middle;
 96 | }
 97 | input{
 98 |     border: none;
 99 | &:focus{
100 |      outline: none;
101 |  }
102 | }
103 | a {
104 |     text-decoration: none;
105 |     outline: 0;
106 |     outline: none;
107 | }
108 | 
109 | body {
110 |   margin: 0;
111 | }
112 | * {
113 |   -webkit-box-sizing: border-box;
114 |   -moz-box-sizing: border-box;
115 |   box-sizing: border-box;
116 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
117 |   -webkit-tap-highlight-color: transparent;
118 | }
119 | /*set fontFamily you need*/
120 | html[lang=en] body {
121 |     font-family: 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', sans-serif;
122 |     line-height: 1.8;
123 |     background: #efeff4;
124 | }
125 | .scroller{
126 |   position: absolute;
127 |   z-index: 1;
128 |   -webkit-tap-highlight-color: rgba(0,0,0,0);
129 |   width: 100%;
130 |   -webkit-transform: translateZ(0);
131 |   -moz-transform: translateZ(0);
132 |   -ms-transform: translateZ(0);
133 |   -o-transform: translateZ(0);
134 |   transform: translateZ(0);
135 |   -webkit-touch-callout: none;
136 |   -webkit-user-select: none;
137 |   -moz-user-select: none;
138 |   -ms-user-select: none;
139 |   user-select: none;
140 |   -webkit-text-size-adjust: none;
141 |   -moz-text-size-adjust: none;
142 |   -ms-text-size-adjust: none;
143 |   -o-text-size-adjust: none;
144 |   text-size-adjust: none;
145 | }
146 | 


--------------------------------------------------------------------------------
/src/view/pickerMobile/mobilePickerDemo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="container clearfloat">
  4 |       <div class="row">
  5 |         <div class="input" v-on:click="showDatePicker(1)">{{date}}</div>
  6 |       </div>
  7 |       <div class="row">
  8 |         <div class="input" v-on:click="showDatePicker(2)">{{date2}}</div>
  9 |       </div>
 10 |       <span>时间格式设置说明：
 11 |               <br>* d      without 0 &nbsp;&nbsp;&nbsp;  * yy     2016 16
 12 |               <br>* dd     with 01   &nbsp;&nbsp;&nbsp;  * yyyy   2016
 13 |               <br>* M      without 0 &nbsp;&nbsp;  * h      12am 12pm 1 2
 14 |               <br>* MM     with 03   &nbsp;&nbsp;  * hh     12am 12pm 01 02
 15 |               <br>* m      minute 1
 16 |               <br>* mm     minute 01   &nbsp;&nbsp;  * H  24h 1 2 3 &nbsp;&nbsp;   * HH     24 01 02
 17 |               <br>年月日分隔符只能 是 '/' 或者 '- ' 小时分钟 英文冒号':'
 18 |             <br> 时间12小时制暂未实现，年份取最后2位暂未实现
 19 |         </span>
 20 |       <mobile-picker :valueStr="picker.value" :visible="picker.visible" :options="picker.options" v-on:checked="hideDatePicker"></mobile-picker>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | <script>
 25 |   import mobilePicker from '../../components/datepickerMobile/pickerMobile'
 26 |   export default{
 27 |     name: 'mobilePickerDemo',
 28 |     data () {
 29 |       return {
 30 |         date: '2015-8-13',
 31 |         date2: '2016-10-11 20:15',
 32 |         options2: {
 33 |           format: 'yyyy/M/dd HH:mm',
 34 |           startDate: '1992-01-01',
 35 |           endDate: '2500-01-01',
 36 |           language: 'cn',
 37 |           timeRange: 10
 38 |         },
 39 |         options1: {
 40 |           format: 'yyyy/MM/dd',
 41 |           startDate: '2000-01-01',
 42 |           endDate: '3000-01-01',
 43 |           language: 'en',
 44 |           timeRange: 25
 45 |         },
 46 |         picker: {
 47 |           value: '',
 48 |           visible: false,
 49 |           id: '',
 50 |           options: {
 51 |             format: 'yyyy/MM/dd',
 52 |             startDate: '1992-01-01',
 53 |             endDate: '2500-01-01',
 54 |             language: 'cn',
 55 |             timeRange: 10
 56 |           }
 57 |         }
 58 |       }
 59 |     },
 60 |     methods: {
 61 |       showDatePicker (type) {
 62 |         if (type === 1) {
 63 |           this.picker.visible = true
 64 |           this.picker.value = this.date
 65 |           this.picker.options = this.options1
 66 |           this.picker.id = type
 67 |         } else if (type === 2) {
 68 |           this.picker.visible = true
 69 |           this.picker.id = type
 70 |           this.picker.value = this.date2
 71 |           this.picker.options = this.options2
 72 |         }
 73 |       },
 74 |       hideDatePicker (date) {
 75 |         if (typeof date === 'string') {
 76 |           if (this.picker.id === 1) {
 77 |             this.date = date
 78 |           } else {
 79 |             this.date2 = date
 80 |           }
 81 |         }
 82 |         this.picker.visible = false
 83 |       }
 84 |     },
 85 |     components: {
 86 |       mobilePicker
 87 |     }
 88 |   }
 89 | </script>
 90 | <style>
 91 |   @import "../../../static/style/coreCss/reset.scss";
 92 | 
 93 |   .clearfloat:after {
 94 |     display: block;
 95 |     clear: both;
 96 |     content: "";
 97 |     visibility: hidden;
 98 |     height: 0
 99 |   }
100 | 
101 |   .clearfloat {
102 |     zoom: 1
103 |   }
104 | 
105 |   .row {
106 |     height: 1.2rem;
107 |     line-height: 1.2rem;
108 |   }
109 | 
110 |   .input {
111 |     border-bottom: 1px solid #b3b3b3;
112 |     background: white;
113 |     height: inherit;
114 |     line-height: inherit;
115 |     font-size: .48rem;
116 |     color: #333333;
117 |     text-align: right;
118 |     padding: 0 .2667rem;
119 |     width: 100%;
120 |   }
121 | </style>
122 | 


--------------------------------------------------------------------------------
/src/components/datepickerMobile/pickerMobile.scss:
--------------------------------------------------------------------------------
  1 | @import "../../../static/style/coreCss/px2rem.scss";
  2 | $control-btn:#2c97f1;
  3 | $checked-date:#333;
  4 | $unchecked-date:#a8a8a8;
  5 | $border-color:#e1e1e1;
  6 | $picker-bg:#fff;
  7 | $checked-font-size:px2rem(48px);
  8 | $unchecked-font-size:px2rem(40px);
  9 | $panel-bg:#eeeeee;
 10 | 
 11 | 
 12 | /*use this should set position relative*/
 13 | @mixin border2pxBT{
 14 |   &:before{
 15 |     content: '';
 16 |     position: absolute;
 17 |     left: 0;
 18 |     background: $border-color;
 19 |     width: 100%;
 20 |     height: 2px;
 21 |     -webkit-transform: scaleY(0.5);
 22 |     transform: scaleY(0.5);
 23 |     -webkit-transform-origin: 0 0;
 24 |     transform-origin: 0 0;
 25 |   }
 26 |   &:after{
 27 |     content: '';
 28 |     position: absolute;
 29 |     left: 0;
 30 |     background: $border-color;
 31 |     width: 100%;
 32 |     height: 2px;
 33 |     -webkit-transform: scaleY(0.5);
 34 |     transform: scaleY(0.5);
 35 |     -webkit-transform-origin: 0 0;
 36 |     transform-origin: 0 0;
 37 |   }
 38 | }
 39 | @mixin border1pxBT{
 40 |   &:before{
 41 |     content: '';
 42 |     position: absolute;
 43 |     left: 0;
 44 |     background: $border-color;
 45 |     width: 100%;
 46 |     height: 1px;
 47 |     -webkit-transform: scaleY(0.5);
 48 |     transform: scaleY(0.5);
 49 |     -webkit-transform-origin: 0 0;
 50 |     transform-origin: 0 0;
 51 |   }
 52 |   &:after{
 53 |     content: '';
 54 |     position: absolute;
 55 |     left: 0;
 56 |     background: $border-color;
 57 |     width: 100%;
 58 |     height: 1px;
 59 |     -webkit-transform: scaleY(0.5);
 60 |     transform: scaleY(0.5);
 61 |     -webkit-transform-origin: 0 0;
 62 |     transform-origin: 0 0;
 63 |   }
 64 | }
 65 | @mixin border2pxT{
 66 |   &:before{
 67 |     content: '';
 68 |     position: absolute;
 69 |     left: 0;
 70 |     background: $border-color;
 71 |     width: 100%;
 72 |     height: 2px;
 73 |     -webkit-transform: scaleY(0.5);
 74 |     transform: scaleY(0.5);
 75 |     -webkit-transform-origin: 0 0;
 76 |     transform-origin: 0 0;
 77 |   }
 78 | }
 79 | @mixin border2pxB{
 80 |   &:after{
 81 |     content: '';
 82 |     position: absolute;
 83 |     left: 0;
 84 |     background: $border-color;
 85 |     width: 100%;
 86 |     height: 2px;
 87 |     -webkit-transform: scaleY(0.5);
 88 |     transform: scaleY(0.5);
 89 |     -webkit-transform-origin: 0 0;
 90 |     transform-origin: 0 0;
 91 |   }
 92 | }
 93 | @mixin border1pxT{
 94 |   &:before{
 95 |     content: '';
 96 |     position: absolute;
 97 |     left: 0;
 98 |     background: $border-color;
 99 |     width: 100%;
100 |     height: 1px;
101 |     -webkit-transform: scaleY(0.5);
102 |     transform: scaleY(0.5);
103 |     -webkit-transform-origin: 0 0;
104 |     transform-origin: 0 0;
105 |   }
106 | }
107 | @mixin border1pxB{
108 |   &:after{
109 |     content: '';
110 |     position: absolute;
111 |     left: 0;
112 |     background: $border-color;
113 |     width: 100%;
114 |     height: 1px;
115 |     -webkit-transform: scaleY(0.5);
116 |     transform: scaleY(0.5);
117 |     -webkit-transform-origin: 0 0;
118 |     transform-origin: 0 0;
119 |   }
120 | }
121 | .mobile-mask{
122 |   position: absolute;
123 |   top: 0;
124 |   bottom: 0;
125 |   left: 0;
126 |   right: 0;
127 |   overflow: hidden;
128 |   .mobile-picker{
129 |     position: absolute;
130 |     overflow: hidden;
131 |     bottom: 0;
132 |     height: px2rem(520px);
133 |     width: 100%;
134 |     .picker-control{
135 |       width: 100%;
136 |       @include border1pxB;
137 |       height: px2rem(90px);
138 |       display: flex;
139 |       flex-wrap: nowrap;
140 |       justify-content: space-between;
141 |       background: $picker-bg;
142 |       .control-cancel,.control-ok,.control-date{
143 |         line-height:px2rem(90px);
144 |         color: $control-btn;
145 |         width: px2rem(160px);
146 |         padding:0 px2rem(20px);
147 |         font-size: px2rem(30px);
148 |         text-align: center;
149 |       }
150 |       .control-date{
151 |         padding:0;
152 |         width:px2rem(480px);
153 |         text-align: center;
154 |         font-size: px2rem(34px);
155 |         display: flex;
156 |         flex-wrap: nowrap;
157 |         justify-content: center;
158 |       }
159 |     }
160 |     .picker-panel{
161 |       height: px2rem(430px);
162 |       overflow: hidden;
163 |       @include border1pxT;
164 |       background: $picker-bg;
165 |       .panel-box{
166 |         height: inherit;
167 |         overflow: hidden;
168 |         padding: px2rem(20px) px2rem(55px);
169 |         box-shadow: inset 0px 0px 43px #fff;
170 |         display: -webkit-box;
171 |         display: -ms-flexbox;
172 |         display: flex;
173 |         -ms-flex-wrap: nowrap;
174 |         flex-wrap: nowrap;
175 |         -ms-flex-pack: distribute;
176 |         justify-content: space-around;
177 |         font-size: px2rem(40px);
178 |         text-align: center;
179 |       }
180 |       .box-year,.box-month,.box-day,.box-hour,.box-minute{
181 |         overflow: hidden;
182 |         width: 100%;
183 |         text-align: center;
184 |         position: relative;
185 |         height: px2rem(400px);
186 |       }
187 |       .year-list,.month-list,.day-list,.minute-list,.hour-list{
188 |         position: absolute;
189 |         top:-1px;
190 |         z-index: 1;
191 |         overflow: visible;
192 |         left: 0;
193 |         right: 0;
194 |         color: $checked-date;
195 |         font-size: px2rem(38px);
196 |         -webkit-transform-style: preserve-3d;
197 |         transform-style: preserve-3d;
198 |         .list-div{
199 |           text-shadow: 0 1px 1px rgba(102, 102, 102, 0.6);
200 |           height: px2rem(68px);
201 |           line-height: px2rem(68px);
202 |           top:0;
203 |           width: 100%;
204 |           text-align: center;
205 |           background: $picker-bg;
206 |           white-space: nowrap;
207 |           overflow: hidden;
208 |           text-overflow: ellipsis;
209 |         }
210 |         .canNotChoose{
211 |           color: $unchecked-date;
212 |           text-shadow: none;
213 |         }
214 |       }
215 |       .check-line{
216 |         position: absolute;
217 |         left: 0;
218 |         right: 0;
219 |         top:px2rem(180px);
220 |         height: px2rem(68px);
221 |         &:before{
222 |           content: '';
223 |           position: absolute;
224 |           left: 0;
225 |           background: $control-btn;
226 |           width: 100%;
227 |           height: 2px;
228 |           -webkit-transform: scaleY(0.5);
229 |           transform: scaleY(0.5);
230 |           -webkit-transform-origin: 0 0;
231 |           transform-origin: 0 0;
232 |           z-index: 3;
233 |         }
234 |         &:after{
235 |           content: '';
236 |           position: absolute;
237 |           top:px2rem(68);
238 |           left: 0;
239 |           background: $control-btn;
240 |           width: 100%;
241 |           height: 2px;
242 |           -webkit-transform: scaleY(0.5);
243 |           transform: scaleY(0.5);
244 |           -webkit-transform-origin: 0 0;
245 |           transform-origin: 0 0;
246 |           z-index:3;
247 |         }
248 |       }
249 |       .year-checked,.month-checked,.day-checked,.hour-checked,.minute-checked{
250 |         height: px2rem(68px);
251 |         line-height:px2rem(68px);
252 |         overflow: hidden;
253 |         position: absolute;
254 |         top:px2rem(180px);
255 |         left: 0;
256 |         right: 0;
257 |        /* border-top: 1px solid $control-btn ;
258 |         border-bottom: 1px solid $control-btn;*/
259 |         z-index: 2;
260 |         font-size: px2rem(48px);
261 |         -webkit-transform: translate3d(0px, 0px, 88px);
262 |         transform: translate3d(0px, 0px, 88px);
263 |       }
264 |       .year-wheel,.month-wheel,.day-wheel,.hour-wheel,.minute-wheel{
265 |         position: absolute;
266 |         overflow: visible;
267 |         height: px2rem(68px);
268 |         font-size: px2rem(36px);
269 |         top:px2rem(180px);
270 |         left: 0;
271 |         right: 0;
272 |         color:$unchecked-date;
273 |         -webkit-transform-style: preserve-3d;
274 |         transform-style: preserve-3d;
275 |         .wheel-div{
276 |           height: px2rem(68px);
277 |           line-height: px2rem(68px);
278 |           position: absolute;
279 |           top:0;
280 |           width: 100%;
281 |           text-align: center;
282 |           -webkit-backface-visibility: hidden;
283 |           backface-visibility: hidden;
284 |           white-space: nowrap;
285 |           overflow: hidden;
286 |           text-overflow: ellipsis;
287 |         }
288 |       }
289 |     }
290 |   }
291 | }
292 | 
293 | 
294 | .picker-Toggle-enter-active,.picker-Toggle-leave-active {
295 |   -webkit-transition: all .75s cubic-bezier(0.190, 1.000, 0.220, 1.000);
296 |   transition: all .75s cubic-bezier(0.190, 1.000, 0.220, 1.000)
297 | }
298 | .picker-Toggle-enter {
299 |   -webkit-transform: translateY(100%);
300 |   transform: translateY(100%);
301 |   opacity: 0;
302 | }
303 | 
304 | .picker-Toggle-leave-active {
305 |   -webkit-transform: translateY(100%);
306 |   transform: translateY(100%);
307 |   opacity: 0;
308 | }
309 | /*-----*/
310 | .toggle-mask-enter-active,.toggle-mask-leave-active {
311 |   -webkit-transition: all .75s cubic-bezier(0.190, 1.000, 0.220, 1.000);
312 |   transition: all .75s cubic-bezier(0.190, 1.000, 0.220, 1.000)
313 | }
314 | .toggle-mask-enter {
315 |   opacity: 1;
316 | }
317 | 
318 | .toggle-mask-leave-active {
319 |   opacity: 1;
320 | }
321 | /*------*/
322 | 


--------------------------------------------------------------------------------
/src/components/datepickerMobile/pickerMobile.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition name="toggle-mask">
  3 |     <div class="mobile-mask" v-show="visible">
  4 |       <transition name="picker-Toggle">
  5 |         <div class="mobile-picker" v-show="visible">
  6 |           <div class="picker-control" v-if="!Format.isHour">
  7 |             <div class="control-cancel" v-on:click="cancel">{{'Cancel'|btnF(language)}}</div>
  8 |             <div class="control-date">
  9 |               <span>{{tmpYear}}</span>
 10 |               <span>-</span>
 11 |               <span>{{Format.month=='MM'&&(tmpMonth+1)<10?0:''}}{{tmpMonth+1}}</span>
 12 |               <span>-</span>
 13 |               <span>{{Format.day=='dd'&&tmpDay<10?0:''}}{{tmpDay}}</span>
 14 |             </div>
 15 |             <div class="control-ok" v-on:click="checked">{{'Confirm'|btnF(language)}}</div>
 16 |           </div>
 17 |           <div class="picker-control" v-if="Format.isHour&&panelType==1">
 18 |             <div class="control-cancel" v-on:click="cancel">{{'Cancel'|btnF(language)}}</div>
 19 |             <div class="control-date">
 20 |               <span>{{tmpYear}}</span>
 21 |               <span>-</span>
 22 |               <span>{{Format.month=='MM'&&(tmpMonth+1)<10?0:''}}{{tmpMonth+1}}</span>
 23 |               <span>-</span>
 24 |               <span>{{Format.day=='dd'&&tmpDay<10?0:''}}{{tmpDay}}</span>
 25 |               <span>&nbsp;</span>
 26 |               <span>{{tmpHour}}</span>
 27 |               <span>:</span>
 28 |               <span>{{tmpMinute}}</span>
 29 |             </div>
 30 |             <div class="control-ok" v-on:click="changeType(2)">{{'Next'|btnF(language)}}</div>
 31 |           </div>
 32 |           <div class="picker-control" v-if="Format.isHour&&panelType==2">
 33 |             <div class="control-cancel" v-on:click="changeType(1)">{{'Previous'|btnF(language)}}</div>
 34 |             <div class="control-date">
 35 |               <span>{{tmpYear}}</span>
 36 |               <span>-</span>
 37 |               <span>{{Format.month=='MM'&&(tmpMonth+1)<10?0:''}}{{tmpMonth+1}}</span>
 38 |               <span>-</span>
 39 |               <span>{{Format.day=='dd'&&tmpDay<10?0:''}}{{tmpDay}}</span>
 40 |               <span>&nbsp;</span>
 41 |               <span>{{tmpHour}}</span>
 42 |               <span>:</span>
 43 |               <span>{{tmpMinute}}</span>
 44 |             </div>
 45 |             <div class="control-ok" v-on:click="checked">{{'Confirm'|btnF(language)}}</div>
 46 |           </div>
 47 |           <div class="picker-panel">
 48 |             <div class="panel-box">
 49 |               <div class="box-year" v-show="!Format.isHour||Format.isHour&&panelType==1" v-on:touchstart="myTouch($event,'year')" v-on:touchmove="myMove($event,'year')"
 50 |                    v-on:touchend="myEnd($event,'year')">
 51 |                 <div class="check-line"></div>
 52 |                 <div class="year-checked">
 53 |                   <div class="year-list" data-translateY="0" style="transform: translateY(0rem);">
 54 |                     <div class="list-div" v-bind:class="{canNotChoose:!validYear(year.value)}" v-for="year in renderListYear" v-bind:data-index="year.index">{{year.value}}{{language=='cn'?'年':''}}
 55 |                     </div>
 56 |                   </div>
 57 |                 </div>
 58 |                 <div class="year-wheel" style="transform: rotate3d(1, 0, 0,0deg);">
 59 |                   <div class="wheel-div" v-for="year in renderListYear" v-bind:data-index="year.index"
 60 |                        v-bind:style="{transform: 'rotate3d(1, 0, 0, '+ (-year.index)*20%360+'deg) translate3d(0px, 0px, 2.5rem)'}">{{year.value}}{{language=='cn'?'年':''}}
 61 |                   </div>
 62 |                 </div>
 63 |               </div>
 64 |               <div class="box-month" v-show="!Format.isHour||Format.isHour&&panelType==1" v-on:touchstart="myTouch($event,'month')" v-on:touchmove="myMove($event,'month')"
 65 |                    v-on:touchend="myEnd($event,'month')">
 66 |                 <div class="check-line"></div>
 67 |                 <div class="month-checked">
 68 |                   <div class="month-list" data-translateY="0" style="transform: translateY(0rem)">
 69 |                     <div class="list-div" v-bind:class="{canNotChoose:!validMonth(month.value-1)}" v-for="month in renderListMonth" v-bind:data-index="month.index">{{month.value|monthF(language)}}
 70 |                     </div>
 71 |                   </div>
 72 |                 </div>
 73 |                 <div class="month-wheel" style=" transform: rotate3d(1, 0, 0,0deg)">
 74 |                   <div class="wheel-div" v-for="month in renderListMonth" v-bind:data-index="month.index"
 75 |                        v-bind:style="{transform: 'rotate3d(1, 0, 0, '+ (-month.index)*20%360+'deg) translate3d(0px, 0px, 2.5rem)'}">{{month.value|monthF(language)}}
 76 |                   </div>
 77 |                 </div>
 78 |               </div>
 79 |               <div class="box-day" v-show="!Format.isHour||Format.isHour&&panelType==1" v-on:touchstart="myTouch($event,'day')" v-on:touchmove="myMove($event,'day')"
 80 |                    v-on:touchend="myEnd($event,'day')">
 81 |                 <div class="check-line"></div>
 82 |                 <div class="day-checked">
 83 |                   <div class="day-list" data-translateY="0" style="transform: translateY(0rem)">
 84 |                     <div class="list-div" v-bind:class="{canNotChoose:!validDay(day)}" v-for="day in renderListDay" v-bind:data-index="day.index">
 85 |                       {{Format.day=='dd'&&day.value<10?'0':''}}{{day.value}}{{day.value|weekF(tmpYear,tmpMonth,language)}}
 86 |                     </div>
 87 |                   </div>
 88 |                 </div>
 89 |                 <div class="day-wheel" style=" transform: rotate3d(1, 0, 0,0deg)">
 90 |                   <div class="wheel-div" v-for="day in renderListDay" v-bind:data-index="day.index"
 91 |                        v-bind:style="{transform: 'rotate3d(1, 0, 0, '+ (-day.index)*20%360+'deg) translate3d(0px, 0px, 2.5rem)'}">
 92 |                     {{Format.day=='dd'&&day.value<10?'0':''}}{{day.value}}{{day.value|weekF(tmpYear,tmpMonth,language)}}
 93 |                   </div>
 94 |                 </div>
 95 |               </div>
 96 |               <div class="box-hour" v-show="Format.isHour&&panelType==2" v-on:touchstart="myTouch($event,'hour')" v-on:touchmove="myMove($event,'hour')" v-on:touchend="myEnd($event,'hour')">
 97 |                 <div class="check-line"></div>
 98 |                 <div class="hour-checked">
 99 |                   <div class="hour-list" data-translateY="0" style="transform: translateY(0rem)">
100 |                     <div class="list-div" v-for="hour in renderListHour" v-bind:data-index="hour.index">{{Format.hour=='HH'&&hour.value<10?'0':''}}{{hour.value}}</div>
101 |                   </div>
102 |                 </div>
103 |                 <div class="hour-wheel" style=" transform: rotate3d(1, 0, 0,0deg)">
104 |                   <div class="wheel-div" v-for="hour in renderListHour" v-bind:data-index="hour.index"
105 |                        v-bind:style="{transform: 'rotate3d(1, 0, 0, '+ (-hour.index)*20%360+'deg) translate3d(0px, 0px, 2.5rem)'}">{{Format.hour=='HH'&&hour.value<10?'0':''}}{{hour.value}}
106 |                   </div>
107 |                 </div>
108 |               </div>
109 |               <div class="box-minute" v-show="Format.isHour&&panelType==2" v-on:touchstart="myTouch($event,'minute')" v-on:touchmove="myMove($event,'minute')" v-on:touchend="myEnd($event,'minute')">
110 |                 <div class="check-line"></div>
111 |                 <div class="minute-checked">
112 |                   <div class="minute-list" data-translateY="0" style="transform: translateY(0rem)">
113 |                     <div class="list-div" v-for="minute in renderListMinute" v-bind:data-index="minute.index">{{Format.minute=='mm'&&minute.value<10?'0':''}}{{minute.value}}</div>
114 |                   </div>
115 |                 </div>
116 |                 <div class="minute-wheel" style=" transform: rotate3d(1, 0, 0,0deg)">
117 |                   <div class="wheel-div" v-for="minute in renderListMinute" v-bind:data-index="minute.index"
118 |                        v-bind:style="{transform: 'rotate3d(1, 0, 0, '+ (-minute.index)*20%360+'deg) translate3d(0px, 0px, 2.5rem)'}">{{Format.minute=='mm'&&minute.value<10?'0':''}}{{minute.value}}
119 |                   </div>
120 |                 </div>
121 |               </div>
122 |             </div>
123 |           </div>
124 |         </div>
125 |       </transition>
126 |     </div>
127 |   </transition>
128 | </template>
129 | <script>
130 |   export default{
131 |     name: 'pickerMobile',
132 |     data () {
133 |       let now = new Date()
134 |       return {
135 |         monthList: Array.from({length: 12}, (value, index) => 1 + index),
136 |         hourList: Array.from({length: 24}, (value, index) => 0 + index),
137 |         tmpYear: now.getFullYear(),
138 |         tmpMonth: now.getMonth(),
139 |         tmpDay: now.getDate(),
140 |         tmpHour: now.getHours(),
141 |         tmpMinute: now.getMinutes(),
142 |         /* indefinite wheel spin tool */
143 |         spin: {
144 |           year: {
145 |             head: -9,
146 |             last: 9
147 |           },
148 |           month: {
149 |             head: -9,
150 |             last: 9
151 |           },
152 |           day: {
153 |             head: -9,
154 |             last: 9
155 |           },
156 |           hour: {
157 |             head: -9,
158 |             last: 9
159 |           },
160 |           minute: {
161 |             head: -9,
162 |             last: 9
163 |           }
164 |         },
165 |         touchYear: {
166 |           lastY: 0,
167 |           velocity: 0,
168 |           startTime: 0,
169 |           latsTime: 0,
170 |           lastMove: 0
171 |         },
172 |         touchMonth: {
173 |           lastY: 0,
174 |           velocity: 0,
175 |           startTime: 0,
176 |           latsTime: 0,
177 |           lastMove: 0
178 |         },
179 |         touchDay: {
180 |           lastY: 0,
181 |           velocity: 0,
182 |           startTime: 0,
183 |           latsTime: 0,
184 |           lastMove: 0
185 |         },
186 |         touchHour: {
187 |           lastY: 0,
188 |           velocity: 0,
189 |           startTime: 0,
190 |           latsTime: 0,
191 |           lastMove: 0
192 |         },
193 |         touchMinute: {
194 |           lastY: 0,
195 |           velocity: 0,
196 |           startTime: 0,
197 |           latsTime: 0,
198 |           lastMove: 0
199 |         },
200 |         /* spin branch size left and right */
201 |         branch: 9,
202 |         Format: {
203 |           year: 'yyyy',
204 |           month: 'M',
205 |           day: 'd',
206 |           isHour: false,
207 |           hour: 'HH',
208 |           minute: 'mm',
209 |           separator: '-'
210 |         },
211 |         panelType: 1
212 |       }
213 |     },
214 |     props: {
215 |       valueStr: {
216 |         type: String,
217 |         default: ''
218 |       },
219 |       visible: {
220 |         type: Boolean,
221 |         default: false,
222 |         required: true
223 |       },
224 |       options: {
225 |         type: Object
226 |       }
227 |     },
228 |     computed: {
229 |       /* wheel render */
230 |       RangeYear () {
231 |         return {
232 |           // max:this.validDateFormat(this.options.endDate).statues ? parseInt(this.options.endDate.split(this.validDateFormat(this.options.endDate).separator)[0]) : 5000,
233 |           max: 5000,
234 |           // min:this.validDateFormat(this.options.startDate).statues ? parseInt(this.options.startDate.split(this.validDateFormat(this.options.startDate).separator)[0]) : 1970
235 |           min: 1970
236 |         }
237 |       },
238 |       yearList () {
239 |         // [current,.......,max,min,.....current-1]
240 |         let List = []
241 |         for (let k = 0; k <= this.RangeYear.max - this.RangeYear.min; k++) {
242 |           List.push(this.RangeYear.min + k)
243 |         }
244 |         return List
245 |       },
246 |       renderListYear () {
247 |         let list = []
248 |         for (let k = this.spin.year.head; k <= this.spin.year.last; k++) {
249 |           let obj = {
250 |             value: this.getData(k, 'year'),
251 |             index: k
252 |           }
253 |           list.push(obj)
254 |         }
255 |         return list
256 |       },
257 |       dayList () {
258 |         /* get currentMonthLenght */
259 |         let currentMonthLength = new Date(this.tmpYear, this.tmpMonth + 1, 0).getDate()
260 |         /* get currentMonth day */
261 |         let daylist = Array.from({length: currentMonthLength}, (value, index) => {
262 |           return index + 1
263 |         })
264 |         return daylist
265 |       },
266 |       renderListDay () {
267 |         let list = []
268 |         for (let k = this.spin.day.head; k <= this.spin.day.last; k++) {
269 |           let obj = {
270 |             value: this.getData(k, 'day'),
271 |             index: k
272 |           }
273 |           list.push(obj)
274 |         }
275 |         return list
276 |       },
277 |       renderListMonth () {
278 |         let list = []
279 |         for (let k = this.spin.month.head; k <= this.spin.month.last; k++) {
280 |           let obj = {
281 |             value: this.getData(k, 'month'),
282 |             index: k
283 |           }
284 |           list.push(obj)
285 |         }
286 |         return list
287 |       },
288 |       renderListHour () {
289 |         let list = []
290 |         for (let k = this.spin.hour.head; k <= this.spin.hour.last; k++) {
291 |           let obj = {
292 |             value: this.getData(k, 'hour'),
293 |             index: k
294 |           }
295 |           list.push(obj)
296 |         }
297 |         return list
298 |       },
299 |       minuteList () {
300 |         if (this.Format.isHour) {
301 |           let range = this.options.timeRange ? this.options.timeRange : 15
302 |           let list = []
303 |           for (let m = 0; m < Math.ceil(60 / range); m++) {
304 |             let tempM = m * range
305 |             if (tempM < 60) {
306 |               list.push(tempM)
307 |             }
308 |           }
309 |           return list
310 |         } else {
311 |           return Array.from({length: 60}, (value, index) => 0 + index)
312 |         }
313 |       },
314 |       renderListMinute () {
315 |         let list = []
316 |         for (let k = this.spin.minute.head; k <= this.spin.minute.last; k++) {
317 |           let obj = {
318 |             value: this.getData(k, 'minute'),
319 |             index: k
320 |           }
321 |           list.push(obj)
322 |         }
323 |         return list
324 |       },
325 |       /* props */
326 |       language () {
327 |         return this.options.language ? this.options.language : 'cn'
328 |       },
329 |       orYear () {
330 |         let obj = this.validDateFormat(this.valueStr)
331 |         if (this.valueStr !== '' && obj.statues) {
332 |           this.tmpYear = Number(this.valueStr.split(obj.separator)[0])
333 |           return this.tmpYear
334 |         } else {
335 |           this.tmpYear = new Date().getFullYear()
336 |           return this.tmpYear
337 |         }
338 |       },
339 |       orMonth () {
340 |         let obj = this.validDateFormat(this.valueStr)
341 |         if (this.valueStr !== '' && obj.statues) {
342 |           this.tmpMonth = Number(this.valueStr.split(obj.separator)[1] - 1)
343 |           return this.tmpMonth
344 |         } else {
345 |           this.tmpMonth = new Date().getMonth()
346 |           return this.tmpMonth
347 |         }
348 |       },
349 |       orDay () {
350 |         let obj = this.validDateFormat(this.valueStr)
351 |         if (this.valueStr !== '' && obj.statues) {
352 |           this.tmpDay = this.valueStr.split(/\s/)[0] ? this.valueStr.split(/\s/)[0].split(obj.separator)[2] ? this.valueStr.split(/\s/)[0].split(obj.separator)[2] : this.valueStr.split(/\s/)[0].split(obj.separator)[2] : this.valueStr.split(obj.separator)[2]
353 |           this.tmpDay = Number(this.tmpDay)
354 |           return this.tmpDay
355 |         } else {
356 |           this.tmpDay = new Date().getDate()
357 |           return this.tmpDay
358 |         }
359 |       },
360 |       orHour () {
361 |         if (this.Format.isHour) {
362 |           if (this.valueStr !== '') {
363 |             this.tmpHour = Number(this.valueStr.split(/\s/)[1] ? this.valueStr.split(/\s/)[1].split(':')[0] : 23)
364 |             return this.tmpHour
365 |           } else {
366 |             this.tmpHour = new Date().getHours()
367 |             return this.tmpHour
368 |           }
369 |         } else {
370 |           this.tmpHour = new Date().getHours()
371 |           return this.tmpHour
372 |         }
373 |       },
374 |       orMinute () {
375 |         if (this.Format.isHour) {
376 |           if (this.valueStr !== '') {
377 |             this.tmpMinute = Number(this.valueStr.split(/\s/)[1] ? this.valueStr.split(/\s/)[1].split(':')[1] : 59)
378 |             return this.tmpMinute
379 |           } else {
380 |             this.tmpMinute = new Date().getMinutes()
381 |             return this.tmpMinute
382 |           }
383 |         } else {
384 |           this.tmpMinute = new Date().getMinutes()
385 |           return this.tmpMinute
386 |         }
387 |       },
388 |       startDate () {
389 |         // todo use es6
390 |         // update renderList in watch
391 |         return this.validDateFormat(this.options.startDate).statues ? this.options.startDate : '1970-01-01'
392 |       },
393 |       endDate () {
394 |         return this.validDateFormat(this.options.endDate).statues ? this.options.endDate : '5000-01-01'
395 |       }
396 |     },
397 |     methods: {
398 |       myTouch (e, type) {
399 |         e.preventDefault()
400 |         let roller = this.getType(type)
401 |         let Box = roller.Box
402 |         /* touchStart */
403 |         /*
404 |          * startY
405 |          * lastY
406 |          * velocity
407 |          * latsTime
408 |          * */
409 |         let startFinger = e.changedTouches[0]
410 |         Box.lastY = startFinger.pageY
411 |         Box.velocity = 0
412 |         Box.lastTime = Box.startTime = startFinger.timeStamp || Date.now()
413 |         Box.lastMove = 0
414 |         /* get speed */
415 |         Box.startPoint = startFinger.pageY
416 |         /* set css */
417 |         this.setCss(0, type, Box.velocity, false)
418 |       },
419 |       myMove (evt, type) {
420 |         evt.preventDefault()
421 |         let roller = this.getType(type)
422 |         let Box = roller.Box
423 |         /* touchMove */
424 |         /*
425 |          * startY
426 |          * lastY
427 |          * velocity
428 |          * latsTime
429 |          * */
430 | 
431 |         let Finger = evt.changedTouches[0]
432 |         let move = Finger.pageY - Box.lastY
433 |         let now = Finger.timeStamp || Date.now()
434 |         this.setCss(move, type, false)
435 |         Box.lastY = Finger.pageY
436 |         Box.lastTime = now
437 |         Box.lastMove = move
438 |       },
439 |       myEnd (evt, type) {
440 |         let roller = this.getType(type)
441 |         let Box = roller.Box
442 |         evt.preventDefault()
443 |         let Finger = evt.changedTouches[0]
444 |         let move = Finger.pageY - Box.lastY
445 |         let now = Finger.timeStamp || Date.now()
446 |         this.setCss(move, type, true)
447 |         Box.lastY = Finger.pageY
448 |         Box.lastTime = now
449 |         Box.lastMove = move
450 |         let delta = now - Box.startTime
451 |         /* is flicker */
452 |         // todo inertial
453 |         let distance = Finger.pageY - Box.startPoint
454 |         let v = distance / delta
455 |         let time = 1000
456 |         let a = 2
457 |         // acceleration
458 |         /* flicker 300ms */
459 |         if (delta < 300) {
460 |           distance = v * delta * a
461 |           time += delta * a
462 |           this.setCss(distance, type, true, time)
463 |         }
464 |       },
465 |       setCss (move, type, isEnd, time) {
466 |         let wheel, List
467 |         let roller = this.getType(type)
468 |         wheel = roller.wheel
469 |         List = roller.List
470 | 
471 |         let singleHeight = this.px2rem(68)
472 |         let singDegree = 20 / singleHeight
473 |         /* set css */
474 |         let currentListRem = this.$el.getElementsByClassName(List)[0].getAttribute('data-translateY')
475 |         /* update css */
476 |         let remHeight = this.px2rem(move) + parseFloat(currentListRem)
477 |         let remDeg = -remHeight * singDegree
478 |         let offsetHeight = remHeight - this.branch * singleHeight
479 |         /* int css data */
480 |         let Px = Math.round(this.rem2px(remHeight) / 68) * 68
481 |         let rem = this.px2rem(Px)
482 |         let aim = Math.round(remDeg / 20) * 20
483 |         let checkRem = this.px2rem(Math.round(-remDeg / 20) * 68 - this.branch * 68)
484 |         /* change spin */
485 |         this.setSpin(type, aim)
486 |         /* ------------ */
487 |         if (isEnd) {
488 |           /* data get int */
489 |           remHeight = rem
490 |           remDeg = aim
491 |           offsetHeight = checkRem
492 |           /* set css */
493 |           if (time) {
494 |             this.$el.getElementsByClassName(List)[0].style.transition = 'transform ' + time + 'ms cubic-bezier(0.19, 1, 0.22, 1)'
495 |             this.$el.getElementsByClassName(wheel)[0].style.transition = 'transform ' + time + 'ms cubic-bezier(0.19, 1, 0.22, 1)'
496 |           } else {
497 |             this.$el.getElementsByClassName(List)[0].style.transition = 'transform 1000ms cubic-bezier(0.19, 1, 0.22, 1)'
498 |             this.$el.getElementsByClassName(wheel)[0].style.transition = 'transform 1000ms cubic-bezier(0.19, 1, 0.22, 1)'
499 |           }
500 |           this.$el.getElementsByClassName(List)[0].setAttribute('data-translatey', remHeight)
501 |           this.$el.getElementsByClassName(List)[0].style.transform = 'translateY(' + offsetHeight + 'rem)'
502 |           this.$el.getElementsByClassName(List)[0].style.marginTop = -rem + 'rem'
503 |           this.$el.getElementsByClassName(wheel)[0].style.transform = 'rotate3d(1, 0, 0, ' + remDeg + 'deg)'
504 |         } else {
505 |           this.$el.getElementsByClassName(List)[0].style.transition = ''
506 |           this.$el.getElementsByClassName(wheel)[0].style.transition = ''
507 |           this.$el.getElementsByClassName(List)[0].setAttribute('data-translateY', remHeight)
508 |           this.$el.getElementsByClassName(List)[0].style.transform = 'translateY(' + offsetHeight + 'rem)'
509 |           this.$el.getElementsByClassName(List)[0].style.marginTop = -rem + 'rem'
510 |           this.$el.getElementsByClassName(wheel)[0].style.transform = 'rotate3d(1, 0, 0, ' + remDeg + 'deg)'
511 |         }
512 |         /* get check data */
513 |         this.setCheckData(type, aim)
514 |       },
515 |       getType (type) {
516 |         let wheel, List, Box
517 |         switch (type) {
518 |           case 'year':
519 |             wheel = 'year-wheel'
520 |             List = 'year-list'
521 |             Box = this.touchYear
522 |             break
523 |           case 'month':
524 |             wheel = 'month-wheel'
525 |             List = 'month-list'
526 |             Box = this.touchMonth
527 | 
528 |             break
529 |           case 'day':
530 |             wheel = 'day-wheel'
531 |             List = 'day-list'
532 |             Box = this.touchDay
533 |             break
534 |           case 'hour':
535 |             wheel = 'hour-wheel'
536 |             List = 'hour-list'
537 |             Box = this.touchHour
538 | 
539 |             break
540 |           case 'minute':
541 |             wheel = 'minute-wheel'
542 |             List = 'minute-list'
543 |             Box = this.touchMinute
544 |             break
545 |         }
546 |         return {wheel: wheel, List: List, Box: Box}
547 |       },
548 |       setSpin (type, aim) {
549 |         switch (type) {
550 |           case 'year':
551 |             this.spin.year.head = this.branch * -1 + aim / 20
552 |             this.spin.year.last = this.spin.year.head + this.branch * 2
553 |             break
554 |           case 'month':
555 |             this.spin.month.head = this.branch * -1 + aim / 20
556 |             this.spin.month.last = this.spin.month.head + this.branch * 2
557 |             break
558 |           case 'day':
559 |             this.spin.day.head = this.branch * -1 + aim / 20
560 |             this.spin.day.last = this.spin.day.head + this.branch * 2
561 |             break
562 |           case 'hour':
563 |             this.spin.hour.head = this.branch * -1 + aim / 20
564 |             this.spin.hour.last = this.spin.hour.head + this.branch * 2
565 |             break
566 |           case 'minute':
567 |             this.spin.minute.head = this.branch * -1 + aim / 20
568 |             this.spin.minute.last = this.spin.minute.head + this.branch * 2
569 |             break
570 |         }
571 |       },
572 |       setCheckData (type, deg) {
573 |         let index = deg / 20
574 |         if (type === 'year') {
575 |           this.tmpYear = this.getData(index, type)
576 |           /* update day check */
577 |           this.setCss(0, 'day', true, 1000)
578 |         } else if (type === 'month') {
579 |           this.tmpMonth = this.getData(index, type) - 1
580 |           /* update day check */
581 |           this.setCss(0, 'day', true, 1000)
582 |         } else if (type === 'day') {
583 |           this.tmpDay = this.getData(index, type)
584 |         } else if (type === 'hour') {
585 |           this.tmpHour = this.getData(index, type)
586 |         } else if (type === 'minute') {
587 |           this.tmpMinute = this.getData(index, type)
588 |         }
589 |       },
590 |       px2rem (d) {
591 |         var val = parseFloat(d) / 75
592 |         if (typeof d === 'string' && d.match(/px$/)) {
593 |           val += 'rem'
594 |         }
595 |         return val
596 |       },
597 |       rem2px (d) {
598 |         var val = parseFloat(d) * 75
599 |         if (typeof d === 'string' && d.match(/rem$/)) {
600 |           val += 'px'
601 |         }
602 |         return val
603 |       },
604 |       getData (idx, type) {
605 |         if (type === 'year') {
606 |           return this.yearList[idx % this.yearList.length >= 0 ? idx % this.yearList.length : idx % this.yearList.length + this.yearList.length]
607 |         } else if (type === 'day') {
608 |           return this.dayList[idx % this.dayList.length >= 0 ? idx % this.dayList.length : idx % this.dayList.length + this.dayList.length]
609 |         } else if (type === 'month') {
610 |           return this.monthList[idx % this.monthList.length >= 0 ? idx % this.monthList.length : idx % this.monthList.length + this.monthList.length]
611 |         } else if (type === 'hour') {
612 |           return this.hourList[idx % this.hourList.length >= 0 ? idx % this.hourList.length : idx % this.hourList.length + this.hourList.length]
613 |         } else if (type === 'minute') {
614 |           return this.minuteList[idx % this.minuteList.length >= 0 ? idx % this.minuteList.length : idx % this.minuteList.length + this.minuteList.length]
615 |         }
616 |       },
617 |       setWheelCurrent () {
618 |         // this.$el.getElementsByClassName(List)[0].setAttribute('data-translateY', remHeight)
619 |         // this.$el.getElementsByClassName(List)[0].style.transform = 'translateY(' + offsetHeight + 'rem)'
620 |         // this.$el.getElementsByClassName(List)[0].style.marginTop = -rem + 'rem'
621 |         // this.$el.getElementsByClassName(wheel)[0].style.transform = 'rotate3d(1, 0, 0, ' + remDeg + 'deg)'
622 |       },
623 |       setFormat (format) {
624 |         /*
625 |          * d      without 0
626 |          * dd     with 01
627 |          * M      without 0
628 |          * MM     with 03
629 |          * yy     2016 16
630 |          * yyyy   2016
631 |          * h      12am 12pm 1 2
632 |          * hh     12am 12pm 01 02
633 |          * H      24h 1 2 3
634 |          * HH     24 01 02
635 |          * m      minute 1
636 |          * mm     minute 01
637 |          * */
638 |         /* let  format=this.options.format */
639 |         let reg1 = /^[yyyy]{4}-?\/?[M,MM]{1,2}-?\/?[d,dd]{1,2}\s[h,hh,H,HH]{1,2}:[m,mm]{1,2}$|^[yyyy]{4}-?\/?[M,MM]{1,2}-?\/?[d,dd]{1,2}$/
640 |         let reg2 = /^[yyyy]{4}-?\/?[M,MM]{1,2}-?\/?[d,dd]{1,2}\s[h,hh,H,HH]{1,2}:[m,mm]{1,2}$/
641 |         let reg3 = /^[yyyy]{4}-?\/?[M,MM]{1,2}-?\/?[d,dd]{1,2}$/
642 |         // todo different format set different this.Format when you finished pick ,you should set out put date format base on this.Format value
643 |         if (reg1.test(format)) {
644 |           /* get separator - or / */
645 |           if (format.split('-').length === 3) {
646 |             this.Format.separator = '-'
647 |           } else if (format.split('/').length === 3) {
648 |             this.Format.separator = '/'
649 |           } else {
650 |             throw new TypeError('format must be like yyyy-M-dd, do not set like yyyy/M-dd')
651 |           }
652 |           if (reg2.test(format)) {
653 |             let dateArr = format.split(/\s/)
654 |             let yearArr = dateArr[0].split(this.Format.separator)
655 |             let hourArr = dateArr[1].split(':')
656 |             this.Format.isHour = true
657 |             this.Format.year = yearArr[0]
658 |             this.Format.month = yearArr[1]
659 |             this.Format.day = yearArr[2]
660 |             this.Format.hour = hourArr[0]
661 |             this.Format.minute = hourArr[1]
662 |           } else if (reg3.test(format)) {
663 |             let dateArr = format.split(/\s/)
664 |             let yearArr = dateArr[0].split(this.Format.separator)
665 |             this.Format.isHour = false
666 |             this.Format.year = yearArr[0]
667 |             this.Format.month = yearArr[1]
668 |             this.Format.day = yearArr[2]
669 |           }
670 |         } else {
671 |           throw TypeError('format is wrong,try yyy-M-dd or find api advices')
672 |         }
673 |       },
674 |       validDateFormat (DateStr) {
675 |         let reg4 = /^\d{4}-?\/?\d{1,2}-?\/?\d{1,2}\s\d{1,2}:\d{1,2}$|^\d{4}-?\/?\d{1,2}-?\/?\d{1,2}$/
676 |         let obj = {
677 |           separator: '-',
678 |           statues: false
679 |         }
680 |         if (reg4.test(DateStr)) {
681 |           if (DateStr.split('-').length === 3) {
682 |             obj.separator = '-'
683 |           } else if (DateStr.split('/').length === 3) {
684 |             obj.separator = '/'
685 |           }
686 |           obj.statues = true
687 |           return obj
688 |         } else {
689 |           return obj
690 |         }
691 |       },
692 |       /* valid data */
693 |       validYear (year) {
694 |         let obj1 = this.validDateFormat(this.startDate)
695 |         let obj2 = this.validDateFormat(this.endDate)
696 |         if (obj1.statues && obj2.statues) {
697 |           if (Number(this.startDate.split(obj1.separator)[0]) <= year && year <= Number(this.endDate.split(obj2.separator)[0])) {
698 |             return true
699 |           } else {
700 |             return false
701 |           }
702 |         } else {
703 |           return false
704 |         }
705 |       },
706 |       validMonth (month) {
707 |         let obj1 = this.validDateFormat(this.startDate)
708 |         let obj2 = this.validDateFormat(this.endDate)
709 |         if (obj1.statues && obj2.statues) {
710 |           let satrDate = new Date(this.startDate.split(obj1.separator)[0], this.startDate.split(obj1.separator)[1] - 1).getTime()
711 |           let endDate = new Date(this.endDate.split(obj2.separator)[0], this.endDate.split(obj2.separator)[1] - 1).getTime()
712 |           let tempDate = new Date(this.tmpYear, month).getTime()
713 |           if (satrDate <= tempDate && tempDate <= endDate) {
714 |             return true
715 |           } else {
716 |             return false
717 |           }
718 |         } else {
719 |           return false
720 |         }
721 |       },
722 |       validDay (day) {
723 |         let obj1 = this.validDateFormat(this.startDate)
724 |         let obj2 = this.validDateFormat(this.endDate)
725 |         if (obj1.statues && obj2.statues) {
726 |           let satrDate = new Date(this.startDate.split(obj1.separator)[0], this.startDate.split(obj1.separator)[1] - 1, this.startDate.split(obj1.separator)[2]).getTime()
727 |           let endDate = new Date(this.endDate.split(obj2.separator)[0], this.endDate.split(obj2.separator)[1] - 1, this.endDate.split(obj2.separator)[2]).getTime()
728 |           let tempDate = new Date(this.tmpYear, this.tmpMonth, day.value).getTime()
729 |           if (satrDate <= tempDate && tempDate <= endDate) {
730 |             return true
731 |           } else {
732 |             return false
733 |           }
734 |         } else {
735 |           return false
736 |         }
737 |       },
738 |       validHour (hour) {
739 |         let obj1 = this.validDateFormat(this.startDate)
740 |         let obj2 = this.validDateFormat(this.endDate)
741 |         if (obj1.statues && obj2.statues) {
742 |           let satrDate = new Date(this.startDate.split(obj1.separator)[0], this.startDate.split(obj1.separator)[1] - 1, this.startDate.split(obj1.separator)[2], this.startDate.split(/\s/)[1] ? this.startDate.split(/\s/)[1].split(':')[0] ? this.startDate.split(/\s/)[1].split(':')[0] : 23 : 23).getTime()
743 |           let endDate = new Date(this.endDate.split(obj1.separator)[0], this.endDate.split(obj1.separator)[1] - 1, this.endDate.split(obj1.separator)[2], this.endDate.split(/\s/)[1] ? this.endDate.split(/\s/)[1].split(':')[0] ? this.endDate.split(/\s/)[1].split(':')[0] : 23 : 23).getTime()
744 |           let tempDate = new Date(this.tmpYear, this.tmpMonth, this.tmpDay, hour).getTime()
745 |           if (satrDate <= tempDate && tempDate <= endDate) {
746 |             return true
747 |           } else {
748 |             return false
749 |           }
750 |         } else {
751 |           return false
752 |         }
753 |       },
754 |       validMinute (minute) {
755 |         let obj1 = this.validDateFormat(this.startDate)
756 |         let obj2 = this.validDateFormat(this.endDate)
757 |         if (obj1.statues && obj2.statues) {
758 |           let satrDate = new Date(this.startDate.split(obj1.separator)[0], this.startDate.split(obj1.separator)[1] - 1, this.startDate.split(obj1.separator)[2], this.startDate.split(/\s/)[1] ? this.startDate.split(/\s/)[1].split(':')[0] ? this.startDate.split(/\s/)[1].split(':')[0] : 23 : 23, this.startDate.split(/\s/)[1] ? this.startDate.split(/\s/)[1].split(':')[1] ? this.startDate.split(/\s/)[1].split(':')[1] : 59 : 59).getTime()
759 |           let endDate = new Date(this.endDate.split(obj1.separator)[0], this.endDate.split(obj1.separator)[1] - 1, this.endDate.split(obj1.separator)[2], this.endDate.split(/\s/)[1] ? this.endDate.split(/\s/)[1].split(':')[0] ? this.endDate.split(/\s/)[1].split(':')[0] : 23 : 23, this.endDate.split(/\s/)[1] ? this.endDate.split(/\s/)[1].split(':')[1] ? this.endDate.split(/\s/)[1].split(':')[1] : 59 : 59).getTime()
760 |           let tempDate = new Date(this.tmpYear, this.tmpMonth, this.tmpDay, this.tmpHour, minute.M).getTime()
761 |           if (satrDate <= tempDate && tempDate <= endDate) {
762 |             return true
763 |           } else {
764 |             return false
765 |           }
766 |         } else {
767 |           return false
768 |         }
769 |       },
770 |       validCheckeDate () {
771 |         let obj1 = this.validDateFormat(this.startDate)
772 |         let obj2 = this.validDateFormat(this.endDate)
773 |         if (obj1.statues && obj2.statues) {
774 |           let satrDate = new Date(this.startDate.split(obj1.separator)[0], this.startDate.split(obj1.separator)[1] - 1, this.startDate.split(obj1.separator)[2], this.startDate.split(/\s/)[1] ? this.startDate.split(/\s/)[1].split(':')[0] ? this.startDate.split(/\s/)[1].split(':')[0] : 23 : 23, this.startDate.split(/\s/)[1] ? this.startDate.split(/\s/)[1].split(':')[1] ? this.startDate.split(/\s/)[1].split(':')[1] : 59 : 59).getTime()
775 |           let endDate = new Date(this.endDate.split(obj1.separator)[0], this.endDate.split(obj1.separator)[1] - 1, this.endDate.split(obj1.separator)[2], this.endDate.split(/\s/)[1] ? this.endDate.split(/\s/)[1].split(':')[0] ? this.endDate.split(/\s/)[1].split(':')[0] : 23 : 23, this.endDate.split(/\s/)[1] ? this.endDate.split(/\s/)[1].split(':')[1] ? this.endDate.split(/\s/)[1].split(':')[1] : 59 : 59).getTime()
776 |           let tempDate = new Date(this.tmpYear, this.tmpMonth, this.tmpDay, this.tmpHour, this.tmpMinute).getTime()
777 |           if (satrDate <= tempDate && tempDate <= endDate) {
778 |             return true
779 |           } else {
780 |             return false
781 |           }
782 |         } else {
783 |           return false
784 |         }
785 |       },
786 |       /* btn */
787 |       cancel () {
788 |         this.$emit('checked', this.outPutDate(false))
789 |         this.initWheel()
790 |       },
791 |       checked () {
792 |         if (this.validCheckeDate()) {
793 |           this.orYear = this.tmpYear
794 |           this.orMonth = this.tmpMonth
795 |           this.orDay = this.tmpDay
796 |           if (this.Format.isHour) {
797 |             this.orHour = this.tmpHour
798 |             this.orMinute = this.tmpMinute
799 |           }
800 |           this.panelType = 1
801 |           this.$emit('checked', this.outPutDate(true))
802 |         } else {
803 |           window.alert('所选时间超出设定范围,请重新选择')
804 |         }
805 |       },
806 |       /* output */
807 |       outPutDate (type) {
808 |         if (type) {
809 |           if (this.Format.isHour) {
810 |             return this.tmpYear + this.Format.separator + (this.Format.month === 'MM' && (this.tmpMonth + 1) < 10 ? '0' : '') + Number(this.tmpMonth + 1) + this.Format.separator + (this.Format.day === 'dd' && this.tmpDay < 10 ? '0' : '') + this.tmpDay + ' ' + (this.Format.hour === 'HH' && this.tmpHour < 10 ? '0' : '') + this.tmpHour + ':' + (this.Format.minute === 'mm' && this.tmpMinute < 10 ? '0' : '') + this.tmpMinute
811 |           } else {
812 |             return this.tmpYear + this.Format.separator + (this.Format.month === 'MM' && (this.tmpMonth + 1) < 10 ? '0' : '') + Number(this.tmpMonth + 1) + this.Format.separator + (this.Format.day === 'dd' && this.tmpDay < 10 ? '0' : '') + this.tmpDay
813 |           }
814 |         } else {
815 |           if (this.Format.isHour) {
816 |             return this.orYear + this.Format.separator + (this.Format.month === 'MM' && (this.orMonth + 1) < 10 ? '0' : '') + Number(this.orMonth + 1) + this.Format.separator + (this.Format.day === 'dd' && this.orDay < 10 ? '0' : '') + this.orDay + ' ' + (this.Format.hour === 'HH' && this.orHour < 10 ? '0' : '') + this.orHour + ':' + (this.Format.minute === 'mm' && this.orMinute < 10 ? '0' : '') + this.orMinute
817 |           } else {
818 |             return this.orYear + this.Format.separator + (this.Format.month === 'MM' && (this.orMonth + 1) < 10 ? '0' : '') + Number(this.orMonth + 1) + this.Format.separator + (this.Format.day === 'dd' && this.orDay < 10 ? '0' : '') + this.orDay
819 |           }
820 |         }
821 |       },
822 |       /* changeType */
823 |       changeType (type) {
824 |         this.panelType = type
825 |       },
826 |       /* init wheel */
827 |       initWheel () {
828 |         /* init wheel and list */
829 |         this.$el.getElementsByClassName('year-list')[0].style.transform = 'translateY(' + ((this.orYear - this.RangeYear.min) * (-1) - this.branch) * 68 / 75 + 'rem)'
830 |         this.$el.getElementsByClassName('year-list')[0].style.marginTop = (this.orYear - this.RangeYear.min) * 68 / 75 + 'rem'
831 |         this.$el.getElementsByClassName('year-list')[0].setAttribute('data-translatey', -(this.orYear - this.RangeYear.min) * 68 / 75)
832 |         this.$el.getElementsByClassName('year-wheel')[0].style.transform = 'rotate3d(1, 0, 0, ' + (this.orYear - this.RangeYear.min) * 20 + 'deg)'
833 | 
834 |         this.$el.getElementsByClassName('month-list')[0].style.transform = 'translateY(' + (-this.orMonth * 68 / 75 - this.branch * 68 / 75) + 'rem)'
835 |         this.$el.getElementsByClassName('month-list')[0].style.marginTop = this.orMonth * 68 / 75 + 'rem'
836 |         this.$el.getElementsByClassName('month-list')[0].setAttribute('data-translatey', -this.orMonth * 68 / 75)
837 |         this.$el.getElementsByClassName('month-wheel')[0].style.transform = 'rotate3d(1, 0, 0, ' + this.orMonth * 20 + 'deg)'
838 | 
839 |         this.$el.getElementsByClassName('day-list')[0].style.transform = 'translateY(' + (-(this.orDay - this.dayList[0]) * 68 / 75 - this.branch * 68 / 75) + 'rem)'
840 |         this.$el.getElementsByClassName('day-list')[0].style.marginTop = (this.orDay - this.dayList[0]) * 68 / 75 + 'rem'
841 |         this.$el.getElementsByClassName('day-list')[0].setAttribute('data-translatey', -(this.orDay - this.dayList[0]) * 68 / 75)
842 |         this.$el.getElementsByClassName('day-wheel')[0].style.transform = 'rotate3d(1, 0, 0, ' + (this.orDay - this.dayList[0]) * 20 + 'deg)'
843 | 
844 |         this.$el.getElementsByClassName('hour-list')[0].style.transform = 'translateY(' + (-(this.orHour - this.hourList[0]) * 68 / 75 - this.branch * 68 / 75) + 'rem)'
845 |         this.$el.getElementsByClassName('hour-list')[0].style.marginTop = (this.orHour - this.hourList[0]) * 68 / 75 + 'rem'
846 |         this.$el.getElementsByClassName('hour-list')[0].setAttribute('data-translatey', -(this.orHour - this.hourList[0]) * 68 / 75)
847 |         this.$el.getElementsByClassName('hour-wheel')[0].style.transform = 'rotate3d(1, 0, 0, ' + (this.orHour - this.hourList[0]) * 20 + 'deg)'
848 | 
849 |         this.$el.getElementsByClassName('minute-list')[0].style.transform = 'translateY(' + (-(this.orMinute - this.minuteList[0]) * 68 / 75 - this.branch * 68 / 75) + 'rem)'
850 |         this.$el.getElementsByClassName('minute-list')[0].style.marginTop = (this.orMinute - this.minuteList[0]) * 68 / 75 + 'rem'
851 |         this.$el.getElementsByClassName('minute-list')[0].setAttribute('data-translatey', -(this.orMinute - this.minuteList[0]) * 68 / 75)
852 |         this.$el.getElementsByClassName('minute-wheel')[0].style.transform = 'rotate3d(1, 0, 0, ' + (this.orMinute - this.minuteList[0]) * 20 + 'deg)'
853 | 
854 |         this.spin.year.head = this.orYear - this.RangeYear.min - this.branch
855 |         this.spin.year.last = this.orYear - this.RangeYear.min + this.branch
856 | 
857 |         this.spin.month.head = this.orMonth - this.branch
858 |         this.spin.month.last = this.orMonth + this.branch
859 | 
860 |         this.spin.day.head = (this.orDay - this.dayList[0]) - this.branch
861 |         this.spin.day.last = (this.orDay - this.dayList[0]) + this.branch
862 | 
863 |         this.spin.hour.head = (this.orHour - this.hourList[0]) - this.branch
864 |         this.spin.hour.last = (this.orHour - this.hourList[0]) + this.branch
865 | 
866 |         this.spin.minute.head = (this.orMinute - this.minuteList[0]) - this.branch
867 |         this.spin.minute.last = (this.orMinute - this.minuteList[0]) + this.branch
868 |       }
869 |     },
870 |     watch: {
871 |       visible: function (val, old) {
872 |         if (val) {
873 |           this.initWheel()
874 |         }
875 |         // init format
876 |         if (this.options.format) {
877 |           this.setFormat(this.options.format)
878 |         }
879 |       },
880 |       options: function (val, oldVal) {
881 |         // init format
882 |         if (this.options.format) {
883 |           this.setFormat(this.options.format)
884 |         }
885 |       }
886 |     },
887 |     filters: {
888 |       weekF: (item, year, month, lang) => {
889 |         let week = new Date(year, month, item).getDay()
890 |         switch (lang) {
891 |           case 'cn':
892 |             return {0: '周日', 1: '周一', 2: '周二', 3: '周三', 4: '周四', 5: '周五', 6: '周六'}[week]
893 |           case 'en':
894 |             return {0: 'Su', 1: 'Mo', 2: 'Tu', 3: 'We', 4: 'Th', 5: 'Fr', 6: 'Sa'}[week]
895 |           default:
896 |             return item
897 |         }
898 |       },
899 |       monthF: (month, lang) => {
900 |         switch (lang) {
901 |           case 'cn':
902 |             return {1: '一月', 2: '二月', 3: '三月', 4: '四月', 5: '五月', 6: '六月', 7: '七月', 8: '八月', 9: '九月', 10: '十月', 11: '十一月', 12: '十二月'}[month]
903 |           case 'en':
904 |             return {1: 'JAN', 2: 'FEB', 3: 'MAR', 4: 'APR', 5: 'MAY', 6: 'JUN', 7: 'JUL', 8: 'AUG', 9: 'SEP', 10: 'OCT', 11: 'NOV', 12: 'DEC'}[month]
905 |           default:
906 |             return month
907 |         }
908 |       },
909 |       btnF: (btn, lang) => {
910 |         switch (lang) {
911 |           case 'cn':
912 |             return {Cancel: '取消', Confirm: '确认', Previous: '上一步', Next: '下一步'}[btn]
913 |           case 'en':
914 |             return {Cancel: 'Cancel', Confirm: 'Confirm', Previous: 'Previous', Next: 'Next'}[btn]
915 |           default:
916 |             return btn
917 |         }
918 |       }
919 |     }
920 |   }
921 | </script>
922 | <!-- Add "scoped" attribute to limit CSS to this component only -->
923 | <style scoped lang="scss" rel="stylesheet/scss" src="./pickerMobile.scss"></style>
924 | 


--------------------------------------------------------------------------------