├── .babelrc
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── README.md
├── build
    ├── webpack.dev.config.js
    └── webpack.prod.config.js
├── examples
    ├── App.vue
    ├── index.html
    └── main.js
├── lib
    └── .gitkeep
├── package.json
└── src
    ├── Datepicker.vue
    ├── assets
        └── images
        │   ├── arrow-left-white.svg
        │   ├── arrow-right-white.svg
        │   └── light-arrow-down.svg
    └── index.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "es2015", "es2017"
4 |   ],
5 |   "plugins": [
6 |     "transform-es2015-modules-commonjs"
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules/*
2 | build/*


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "babel-eslint",
 3 |   "env": {
 4 |     "browser": true,
 5 |     "commonjs": true,
 6 |     "es6": true,
 7 |     "node": true
 8 |   },
 9 |   "parserOptions": {
10 |     "ecmaVersion": 8,
11 |     "sourceType": "module"
12 |   },
13 |   "rules": {
14 |     "no-const-assign": "warn",
15 |     "no-this-before-super": "warn",
16 |     "no-undef": "warn",
17 |     "no-unreachable": "warn",
18 |     "no-unused-vars": "warn",
19 |     "constructor-super": "warn",
20 |     "valid-typeof": "warn",
21 |     "semi": [
22 |       "warn",
23 |       "never"
24 |     ],
25 |     "quotes": [
26 |       "warn",
27 |       "single"
28 |     ],
29 |     "arrow-parens": 0,
30 |     "generator-star-spacing": 0,
31 |     "space-before-function-paren": 0
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist
4 | lib/*
5 | !lib/.gitkeep
6 | .vscode
7 | npm-debug.log
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-datepicker
 2 | 
 3 | This is yet another vue datepicker component.
 4 | 
 5 | ## Install
 6 | 
 7 | Use npm to download code:
 8 | 
 9 | ```
10 | npm install hsy-vue-datepicker -S
11 | ```
12 | 
13 | then import it into your project, add below code into your `main.js`:
14 | 
15 | ```js
16 | import Datepicker from 'hsy-vue-datepicker'
17 | 
18 | Vue.use(Datepicker)
19 | ```
20 | 
21 | ## Usage
22 | 
23 | It supports single date mode, you just need to bind your date with `v-model`:
24 | 
25 | ```html
26 | <template>
27 | <div class="demo">
28 |   <datepicker v-model="value"></datepicker>
29 | </div>
30 | </template>
31 | 
32 | <script>
33 | export default {
34 |   data() {
35 |     return {
36 |       value: ['2017-02-01']
37 |     }
38 |   }
39 | }
40 | </script>
41 | ```
42 | 
43 | also, there is a date-range mode, you just need to specify the mode with prop `mode`:
44 | 
45 | ```html
46 | <template>
47 | <div class="demo">
48 |   <datepicker v-model="value" mode="daterange"></datepicker>
49 | </div>
50 | </template>
51 | 
52 | <script>
53 | export default {
54 |   data() {
55 |     return {
56 |       value: ['2017-02-01', '2017-02-05']
57 |     }
58 |   }
59 | }
60 | </script>
61 | ```
62 | 
63 | it contains a hot-realod example for your preview or dev, run it follow:
64 | 
65 | ```sh
66 | $ cd your-clone-dir
67 | $ npm install
68 | $ npm run dev
69 | ```
70 | 
71 | ## Props
72 | 
73 | | Prop            | Description                                      | Type                               | Accepted Values | Default  |
74 | |:----------------|:-------------------------------------------------|:-----------------------------------|:----------------|:---------|
75 | | value           | dates to be manipulated                          | String/Moment/Date/Array of former | --              | moment() |
76 | | mode            | mode of picker                                   | String                             | date/daterange  | date     |
77 | | cssClass        | css class to be appended to component $el        | String                             | --              | --       |
78 | | placeholder     | placeholder                                      | String                             | --              | --       |
79 | | cbDate0Error    | callback for error input from user of begin date | --                                 | --              |          |
80 | | cbDate1Error    | callback for error input from user of end date   | --                                 | --              |          |
81 | | cbCancelClicked | callback for cancel button clicked               | --                                 | --              | --       |
82 | 
83 | ## Demo
84 | 
85 | [Demo](http://vue-demo.hsiaosiyuan.com/#/datepicker)
86 | 
87 | ## Screenshot
88 | 
89 | <img src="http://og9g58alt.bkt.clouddn.com/datepicker.png" width="500">
90 | 


--------------------------------------------------------------------------------
/build/webpack.dev.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 3 | 
 4 | module.exports = {
 5 |   entry: './examples/main.js',
 6 |   resolve: {
 7 |     extensions: ['.js', '.vue', '.json'],
 8 |     alias: {
 9 |       main: path.resolve(__dirname, '../src')
10 |     },
11 |   },
12 |   output: {
13 |     path: path.resolve(__dirname, '../dist/dev'),
14 |     publicPath: '/',
15 |     filename: 'index.js'
16 |   },
17 |   devServer: {
18 |     contentBase: path.resolve(__dirname, '../dist/dev'),
19 |     compress: false,
20 |     port: 8080
21 |   },
22 |   plugins: [
23 |     new HtmlWebpackPlugin({
24 |       filename: path.resolve(__dirname, '../dist/dev/index.html'),
25 |       template: 'examples/index.html',
26 |       inject: true
27 |     })
28 |   ],
29 |   module: {
30 |     loaders: [{
31 |       test: /\.vue$/,
32 |       loader: 'vue-loader'
33 |     }, {
34 |       test: /\.js$/,
35 |       loaders: ['babel-loader', 'eslint-loader'],
36 |       exclude: /node_modules/
37 |     }, {
38 |       test: /\.css$/,
39 |       loader: 'style-loader!css-loader'
40 |     }, {
41 |       test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
42 |       loader: 'url-loader',
43 |       query: {
44 |         limit: 10000,
45 |         name: 'img/[name].[hash:7].[ext]'
46 |       }
47 |     }, {
48 |       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
49 |       loader: 'url-loader',
50 |       query: {
51 |         limit: 10000,
52 |         name: 'fonts/[name].[hash:7].[ext]'
53 |       }
54 |     }]
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/build/webpack.prod.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | 
 3 | module.exports = {
 4 |   entry: './src/index.js',
 5 |   devtool: 'source-map',
 6 |   resolve: {
 7 |     extensions: ['.js', '.vue', '.json']
 8 |   },
 9 |   output: {
10 |     path: path.resolve(__dirname, '../lib'),
11 |     filename: 'index.js',
12 |     libraryTarget: 'commonjs2'
13 |   },
14 |   module: {
15 |     loaders: [{
16 |       test: /\.vue$/,
17 |       loader: 'vue-loader'
18 |     }, {
19 |       test: /\.js$/,
20 |       loaders: ['babel-loader', 'eslint-loader'],
21 |       exclude: /node_modules/
22 |     }, {
23 |       test: /\.css$/,
24 |       loader: 'style-loader!css-loader'
25 |     }, {
26 |       test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
27 |       loader: 'url-loader',
28 |       query: {
29 |         limit: 10000,
30 |         name: 'img/[name].[hash:7].[ext]'
31 |       }
32 |     }, {
33 |       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
34 |       loader: 'url-loader',
35 |       query: {
36 |         limit: 10000,
37 |         name: 'fonts/[name].[hash:7].[ext]'
38 |       }
39 |     }]
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/examples/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="demo">
 3 |   <div>
 4 |     <datepicker cssClass="test1" placeholder="click to select date" v-model="value" mode="daterange" min="2017-02-12"></datepicker>
 5 |   </div>
 6 |   <div style="text-align: right;">
 7 |     <datepicker cssClass="test2" ref="demo2" :dateLabelFormatter="'YYYY年MM月DD日'" placeholder="click to select date" v-model="value" :cbCancelClicked="cancelClicked" mode="daterange" min="2017-02-12"></datepicker>
 8 |   </div>
 9 | </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   data() {
15 |     return {
16 |       value: ['2017-02-01'],
17 |       cls: 'test'
18 |     }
19 |   },
20 |   watch: {
21 |     value(val) {
22 |       console.log(val)
23 |     }
24 |   },
25 |   mounted() {
26 |     setTimeout(() => {
27 |       this.cls = 'test1'
28 |     }, 3000)
29 |   },
30 |   methods: {
31 |     cancelClicked() {
32 |       console.log(1)
33 |       this.value = ['2017-02-01']
34 |     }
35 |   }
36 | }
37 | </script>
38 | 
39 | <style>
40 | .demo {
41 |   background-color: #0097FF;
42 |   padding: 10px;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>test</title>
 7 | </head>
 8 | 
 9 | <body>
10 |   <div id="app"></div>
11 |   <!-- webpack builds are automatically injected -->
12 | </body>
13 | 
14 | </html>
15 | 


--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | import Datepicker from 'main'
 4 | 
 5 | Vue.use(Datepicker)
 6 | 
 7 | new Vue({
 8 |   el: '#app',
 9 |   render: h => h(App)
10 | })
11 | 


--------------------------------------------------------------------------------
/lib/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vue-garden/vue-datepicker/fe9d0095f2cf0eb9cd39190e0b037ac6c383141b/lib/.gitkeep


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hsy-vue-datepicker",
 3 |   "version": "0.1.3",
 4 |   "description": "vue datepicker component",
 5 |   "author": "hsiaosiyuan0 <hsiaosiyuan0@outlook.com>",
 6 |   "main": "lib/index.js",
 7 |   "scripts": {
 8 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --config ./build/webpack.dev.config.js",
 9 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules --config ./build/webpack.prod.config.js",
10 |     "prepublish": "npm run build"
11 |   },
12 |   "dependencies": {
13 |     "moment": "^2.17.1"
14 |   },
15 |   "devDependencies": {
16 |     "babel-core": "^6.21.0",
17 |     "babel-eslint": "^6.1.2",
18 |     "babel-loader": "^6.2.10",
19 |     "babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
20 |     "babel-preset-es2015": "^6.22.0",
21 |     "babel-preset-es2017": "^6.16.0",
22 |     "cross-env": "^3.1.4",
23 |     "css-loader": "^0.23.0",
24 |     "eslint": "^3.12.2",
25 |     "eslint-loader": "^1.6.1",
26 |     "file-loader": "^0.8.4",
27 |     "html-webpack-plugin": "^2.28.0",
28 |     "json-loader": "^0.5.4",
29 |     "style-loader": "^0.13.1",
30 |     "url-loader": "^0.5.7",
31 |     "vue": "^2.1.10",
32 |     "vue-loader": "^10.3.0",
33 |     "vue-style-loader": "^2.0.0",
34 |     "vue-template-compiler": "^2.1.10",
35 |     "webpack": "^2.2.1",
36 |     "webpack-dev-server": "^2.3.0"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/Datepicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div :class="cls">
  3 |   <div class="selected">
  4 |     <div class="input" @click="showCalendar">{{ selectedLabel }}</div>
  5 |     <div class="handler"></div>
  6 |   </div>
  7 |   <div class="calendar" v-show="isCalendarShow">
  8 |     <div class="tables">
  9 |       <div class="table" v-for="(page, idx) in pages">
 10 |         <div class="input">
 11 |           <input type="text" v-if="idx === 0" v-model="input0" @blur="recoverInput0">
 12 |           <input type="text" v-if="idx === 1" v-model="input1" @blur="recoverInput1">
 13 |         </div>
 14 |         <table>
 15 |           <thead>
 16 |             <tr>
 17 |               <th class="prev" @click="backPage"></th>
 18 |               <th colspan="5" class="month"> {{ page.date.format && page.date.format('YYYY年 M月') }} </th>
 19 |               <th class="next" @click="forwardPage"></th>
 20 |             </tr>
 21 |             <tr>
 22 |               <th>日</th>
 23 |               <th>一</th>
 24 |               <th>二</th>
 25 |               <th>三</th>
 26 |               <th>四</th>
 27 |               <th>五</th>
 28 |               <th>六</th>
 29 |             </tr>
 30 |           </thead>
 31 |           <tbody>
 32 |             <tr v-for="row in page.dates">
 33 |               <td v-for="date in row" :class="date.cssClass" @click="selectDate(date)" @mouseover="previewDates(date)">
 34 |                 {{ date.date() }}
 35 |               </td>
 36 |             </tr>
 37 |           </tbody>
 38 |         </table>
 39 |       </div>
 40 |     </div>
 41 |     <div class="confirm">
 42 |       <button class="yes left" @click="saveChanges" :disabled="!savable">确定</button>
 43 |       <button class="no right" @click="cancelClicked">取消</button>
 44 |     </div>
 45 |   </div>
 46 | </div>
 47 | </template>
 48 | 
 49 | <script>
 50 | import moment from 'moment'
 51 | 
 52 | const NIL = {}
 53 | const EMPTY_FN = () => {}
 54 | 
 55 | const MODE_DATE = 'date'
 56 | const MODE_DATERANGE = 'daterange'
 57 | 
 58 | export default {
 59 |   name: 'Datepicker',
 60 |   data() {
 61 |     return {
 62 |       date: [NIL, NIL],
 63 |       selecting: [NIL, NIL],
 64 |       input0: '',
 65 |       input1: '',
 66 |       minDate: NIL,
 67 |       maxDate: NIL,
 68 |       pagesDate: moment(),
 69 |       pages: [{
 70 |         date: NIL,
 71 |         dates: []
 72 |       }],
 73 |       isCalendarShow: false,
 74 |       savable: true,
 75 |       isSelecting: false,
 76 |       previewEndDate: NIL
 77 |     }
 78 |   },
 79 |   props: {
 80 |     // date|daterange
 81 |     mode: {
 82 |       type: String,
 83 |       default: 'date'
 84 |     },
 85 |     min: {
 86 |       validator(val) {
 87 |         return moment(val).isValid()
 88 |       }
 89 |     },
 90 |     max: {
 91 |       validator(val) {
 92 |         return moment(val).isValid()
 93 |       }
 94 |     },
 95 |     value: {},
 96 |     cssClass: String,
 97 |     placeholder: String,
 98 |     dateFormatter: {
 99 |       type: String,
100 |       default: 'YYYY-MM-DD'
101 |     },
102 |     dateLabelFormatter: {
103 |       type: String,
104 |       default: 'YYYY-MM-DD'
105 |     },
106 |     dateLabelSeparator: {
107 |       type: String,
108 |       default: ' - '
109 |     },
110 |     cbDate0Error: {
111 |       type: Function,
112 |       default: EMPTY_FN
113 |     },
114 |     cbDate1Error: {
115 |       type: Function,
116 |       default: EMPTY_FN
117 |     },
118 |     cbCancelClicked: {
119 |       type: Function,
120 |       default: EMPTY_FN
121 |     }
122 |   },
123 |   watch: {
124 |     value: {
125 |       immediate: true,
126 |       handler(val) {
127 |         this.date = [NIL, NIL]
128 |         this.prepareDate()
129 |         this.isSelecting = false
130 |       }
131 |     },
132 |     min: {
133 |       immediate: true,
134 |       handler(val) {
135 |         this.prepareMinMax()
136 |       }
137 |     },
138 |     max: {
139 |       immediate: true,
140 |       handler(val) {
141 |         this.prepareMinMax()
142 |       }
143 |     }
144 |   },
145 |   computed: {
146 |     cls() {
147 |       let daterange = this.mode === MODE_DATERANGE
148 |       let cls = {
149 |         'hsy-datepicker': true,
150 |         daterange
151 |       }
152 |       if (this.cssClass) {
153 |         cls[this.cssClass] = true
154 |       }
155 |       return cls
156 |     },
157 |     date0: {
158 |       set(newVal) {
159 |         let date = moment(newVal)
160 |         if (!date.isValid()) {
161 |           if (this.cbDate0Error !== EMPTY_FN) {
162 |             this.cbDate0Error(newVal)
163 |             return
164 |           } else {
165 |             throw new Error('deformed value of date0')
166 |           }
167 |         }
168 |         this.$set(this.date, 0, date)
169 |         this.$set(this.pages, 0, {
170 |           date: date.clone(),
171 |           dates: []
172 |         })
173 |         this.selecting0 = date.clone()
174 |       },
175 |       get() {
176 |         if (this.date[0] === NIL) {
177 |           return ''
178 |         }
179 |         return this.date[0].format(this.dateLabelFormatter)
180 |       }
181 |     },
182 |     date1: {
183 |       set(newVal) {
184 |         let date = moment(newVal)
185 |         if (!date.isValid()) {
186 |           if (this.cbDate1Error !== EMPTY_FN) {
187 |             this.cbDate1Error(newVal)
188 |             return
189 |           } else {
190 |             throw new Error('deformed value of date0')
191 |           }
192 |         }
193 |         this.$set(this.date, 1, date)
194 |         this.$set(this.pages, 1, {
195 |           date: date.clone(),
196 |           dates: []
197 |         })
198 |         this.selecting1 = date.clone()
199 |       },
200 |       get() {
201 |         if (this.date[1] === NIL) {
202 |           return ''
203 |         }
204 |         return this.date[1].format(this.dateLabelFormatter)
205 |       }
206 |     },
207 |     selecting0: {
208 |       set(newVal) {
209 |         this.input0 = newVal.format(this.dateLabelFormatter)
210 |         this.$set(this.selecting, 0, newVal)
211 |         this.preparePages()
212 |       },
213 |       get() {
214 |         return this.selecting[0].format(this.dateLabelFormatter)
215 |       }
216 |     },
217 |     selecting1: {
218 |       set(newVal) {
219 |         this.input1 = newVal.format(this.dateLabelFormatter)
220 |         this.$set(this.selecting, 1, newVal)
221 |         this.preparePages()
222 |       },
223 |       get() {
224 |         return this.selecting[1].format(this.dateLabelFormatter)
225 |       }
226 |     },
227 |     dateLabel() {
228 |       if (this.date0 !== '') {
229 |         return this.date0
230 |       }
231 |       return this.placeholder
232 |     },
233 |     daterangeLabel() {
234 |       if (this.date0 !== '' && this.date1 !== '') {
235 |         return this.date0 + this.dateLabelSeparator + this.date1
236 |       }
237 |       return this.placeholder
238 |     },
239 |     selectedLabel() {
240 |       return this.mode === MODE_DATE ? this.dateLabel : this.daterangeLabel
241 |     }
242 |   },
243 |   methods: {
244 |     prepareDate() {
245 |       if (this.value === undefined) return
246 | 
247 |       let value = this.value
248 |       if (this.mode === MODE_DATE) {
249 |         if (Array.isArray(value) && value.length) {
250 |           this.date0 = value[0]
251 |         } else {
252 |           this.date0 = value
253 |         }
254 |       } else if (this.mode === MODE_DATERANGE && Array.isArray(value) && value.length === 2) {
255 |         this.date0 = value[0]
256 |         this.date1 = value[1]
257 |       }
258 | 
259 |       if (this.date[0] !== NIL) {
260 |         this.pagesDate = this.date[0].clone()
261 |       }
262 |     },
263 |     prepareMinMax() {
264 |       if (this.min) {
265 |         this.minDate = moment(this.min)
266 |       }
267 |       if (this.max) {
268 |         this.maxDate = moment(this.max)
269 |       }
270 |       if (this.minDate !== NIL && this.maxDate !== NIL && this.minDate.isAfter(this.maxDate)) {
271 |         throw new Error("'min' should same or before of 'max'")
272 |       }
273 |     },
274 |     isSameYearMonthDay(date, date1) {
275 |       return date.isSame(date1, 'year') && date.isSame(date1, 'month'), date.isSame(date1, 'day')
276 |     },
277 |     isSelectingStart(date) {
278 |       return this.isSameYearMonthDay(date, this.selecting[0])
279 |     },
280 |     isSelectingBetween(date) {
281 |       if (this.MODE_DATE) {
282 |         return true
283 |       }
284 |       if (this.isSelecting) {
285 |         return this.previewEndDate !== NIL && date.startOf('day').isAfter(this.selecting[0]) && date.startOf('day').isBefore(this.previewEndDate)
286 |       }
287 |       return date.startOf('day').isAfter(this.selecting[0]) && date.startOf('day').isBefore(this.selecting[1])
288 |     },
289 |     isSelectingEnd(date) {
290 |       if (this.MODE_DATE) {
291 |         return true
292 |       }
293 |       return !this.isSelecting && this.isSameYearMonthDay(date, this.selecting[1])
294 |     },
295 |     prepareDates(date) {
296 |       date = date.clone()
297 |       date.date(1)
298 |       let dayOfWeek = date.day()
299 |       let dates = []
300 |       let d
301 |       for (let i = dayOfWeek; i > 0; i--) {
302 |         d = date.clone().subtract(i, 'days')
303 |         d.cssClass = {
304 |           off: true
305 |         }
306 |         dates.push(d)
307 |       }
308 | 
309 |       let cssDate = (date) => {
310 |         let start = this.isSelectingStart(d)
311 |         if (this.mode === MODE_DATERANGE) {
312 |           let between = this.isSelectingBetween(d)
313 |           let end = this.isSelectingEnd(d)
314 |           d.cssClass = {
315 |             start,
316 |             between,
317 |             end
318 |           }
319 |         } else {
320 |           d.cssClass = {
321 |             active: start
322 |           }
323 |         }
324 |         return d
325 |       }
326 | 
327 |       d = date.clone()
328 |       dates.push(cssDate(d))
329 |       for (let i = 1, len = date.daysInMonth(); i < len; i++) {
330 |         d = date.clone().add(i, 'days')
331 |         dates.push(cssDate(d))
332 |       }
333 |       date = dates[dates.length - 1]
334 |       let tail = 42 - dates.length
335 |       for (let i = 1; i <= tail; i++) {
336 |         d = date.clone().add(i, 'days')
337 |         d.cssClass = {
338 |           off: true
339 |         }
340 |         dates.push(d)
341 |       }
342 |       let row = []
343 |       let rows = [row]
344 |       dates.forEach((date) => {
345 |         if (row.length !== 7) {
346 |           row.push(date)
347 |         } else {
348 |           row = [date]
349 |           rows.push(row)
350 |         }
351 |       })
352 |       return rows
353 |     },
354 |     preparePages() {
355 |       let date = this.pagesDate
356 |       let dates = this.prepareDates(date)
357 |       this.$set(this.pages, 0, {
358 |         date,
359 |         dates
360 |       })
361 |       if (this.mode === MODE_DATERANGE) {
362 |         date = this.pagesDate.clone()
363 |         date.add(1, 'month')
364 |         let dates = this.prepareDates(date)
365 |         this.$set(this.pages, 1, {
366 |           date,
367 |           dates
368 |         })
369 |       }
370 |     },
371 |     selectDate(date) {
372 |       if (date.cssClass && date.cssClass.off) return
373 |       if (this.mode === MODE_DATE) {
374 |         this.selecting0 = date
375 |         return
376 |       }
377 |       if (!this.isSelecting || this.isSelecting && date.isBefore(this.selecting[0])) {
378 |         this.savable = false
379 |         this.isSelecting = true
380 |         this.selecting0 = date
381 |       } else {
382 |         this.savable = true
383 |         this.isSelecting = false
384 |         this.previewEndDate = NIL
385 |         this.selecting1 = date
386 |       }
387 |     },
388 |     backPage() {
389 |       this.pagesDate.subtract(1, 'month')
390 |       this.preparePages()
391 |     },
392 |     forwardPage() {
393 |       this.pagesDate.add(1, 'month')
394 |       this.preparePages()
395 |     },
396 |     dateFromLabelStr(str) {
397 |       let date = moment(str, this.dateLabelFormatter)
398 |       if (date.isValid()) return date
399 |       date = moment(str)
400 |       if (date.isValid()) return date
401 |       return moment.invalid()
402 |     },
403 |     recoverInput0() {
404 |       let date = this.dateFromLabelStr(this.input0)
405 |       if (date.isValid()) {
406 |         this.selectDate(date)
407 |       } else {
408 |         this.input0 = this.selecting0
409 |       }
410 |     },
411 |     recoverInput1() {
412 |       let date = this.dateFromLabelStr(this.input1)
413 |       if (date.isValid()) {
414 |         this.selectDate(date)
415 |       } else {
416 |         this.input1 = this.selecting1
417 |       }
418 |     },
419 |     saveChanges() {
420 |       this.date0 = this.selecting[0]
421 |       if (this.mode === MODE_DATE) {
422 |         this.$emit('input', this.date[0].clone())
423 |       } else {
424 |         this.date1 = this.selecting[1]
425 |         this.$emit('input', this.date.map(d => d.clone()))
426 |       }
427 |       this.isCalendarShow = false
428 |     },
429 |     showCalendar() {
430 |       if (this.date[0] !== NIL) {
431 |         this.selecting0 = this.date[0]
432 |       } else {
433 |         this.selecting0 = moment()
434 |       }
435 |       if (this.date[1] !== NIL) {
436 |         this.selecting1 = this.date[1]
437 |       } else {
438 |         this.selecting1 = moment()
439 |       }
440 | 
441 |       this.isCalendarShow = !this.isCalendarShow
442 |       if (!this.isCalendarShow) return
443 | 
444 |       this.$nextTick(() => {
445 |         let inputEl = this.$el.querySelector('.selected > .input')
446 |         let selectedEl = this.$el.querySelector('.selected')
447 |         let calendarEl = this.$el.querySelector('.calendar')
448 |         if (selectedEl && inputEl && calendarEl) {
449 |           let inputRect = inputEl.getBoundingClientRect()
450 |           let selectedRect = selectedEl.getBoundingClientRect()
451 |           calendarEl.style.top = (inputRect.height + 5) + 'px'
452 |           let calendarRect = calendarEl.getBoundingClientRect()
453 |           if (inputRect.left + calendarRect.width > document.body.clientWidth - 35) {
454 |             calendarEl.style.left = (selectedRect.width - calendarRect.width) + 'px'
455 |           } else {
456 |             calendarEl.style.left = '0px'
457 |           }
458 |         }
459 |       })
460 |     },
461 |     hideCalendar() {
462 |       this.isCalendarShow = false
463 |     },
464 |     previewDates(date) {
465 |       if (this.isSelecting) {
466 |         this.previewEndDate = date
467 |         this.preparePages()
468 |       }
469 |     },
470 |     autoHide(evt) {
471 |       if (!this.$el.contains(evt.target)) {
472 |         this.hideCalendar()
473 |       }
474 |     },
475 |     cancelClicked() {
476 |       this.isCalendarShow = false
477 |       this.cbCancelClicked()
478 |     }
479 |   },
480 |   mounted() {
481 |     document.addEventListener('click', this.autoHide, false)
482 |   },
483 |   destroyed() {
484 |     document.removeEventListener('click', this.autoHide, false)
485 |   }
486 | }
487 | </script>
488 | 
489 | <style>
490 | .hsy-datepicker {
491 |   display: inline-block;
492 |   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
493 |   font-weight: 400;
494 |   font-size: 14px;
495 |   position: relative;
496 | }
497 | 
498 | .hsy-datepicker .calendar {
499 |   display: inline-block;
500 |   background: #fff;
501 |   border-radius: 4px;
502 |   border: 1px solid rgba(0, 0, 0, 0.15);
503 |   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
504 |   padding: 13px 20px;
505 |   position: absolute;
506 | }
507 | 
508 | .hsy-datepicker .calendar .input input {
509 |   display: block;
510 |   padding: 0;
511 |   border: 1px solid #979797;
512 |   margin-bottom: 13px;
513 |   border-radius: 4px;
514 |   width: 100%;
515 |   font-size: 13px;
516 |   color: #6A7288;
517 |   height: 30px;
518 |   line-height: 30px;
519 |   text-align: center;
520 |   outline: none;
521 | }
522 | 
523 | .hsy-datepicker .calendar .input input:focus {
524 |   border: 1px solid #0097FF;
525 | }
526 | 
527 | .hsy-datepicker .calendar .tables {
528 |   white-space: nowrap;
529 | }
530 | 
531 | .hsy-datepicker .calendar .table table {
532 |   border-collapse: collapse;
533 |   border-spacing: 0;
534 | }
535 | 
536 | .hsy-datepicker .calendar .table thead th.prev,
537 | .hsy-datepicker .calendar .table thead th.next {
538 |   padding: 15px;
539 |   border-radius: 4px;
540 |   display: block;
541 |   cursor: pointer;
542 | }
543 | 
544 | .hsy-datepicker .calendar .table thead th.month {
545 |   text-align: center;
546 | }
547 | 
548 | .hsy-datepicker .calendar .table thead tr:last-child th {
549 |   padding: 10px 0;
550 | }
551 | 
552 | .hsy-datepicker .calendar .table thead th.prev:hover,
553 | .hsy-datepicker .calendar .table thead th.next:hover {
554 |   background-color: #888;
555 | }
556 | 
557 | .hsy-datepicker .calendar .table thead th.prev {
558 |   background: #9B9B9B url('assets/images/arrow-left-white.svg') no-repeat center center;
559 | }
560 | 
561 | .hsy-datepicker .calendar .table thead th.next {
562 |   background: #9B9B9B url('assets/images/arrow-right-white.svg') no-repeat center center;
563 | }
564 | 
565 | .hsy-datepicker .calendar .table thead th {
566 |   color: #333;
567 |   font-weight: normal;
568 | }
569 | 
570 | .hsy-datepicker .calendar .table {
571 |   color: #6a7288;
572 | }
573 | 
574 | .hsy-datepicker .calendar .table td {
575 |   padding: 8px;
576 |   text-align: center;
577 | }
578 | 
579 | .hsy-datepicker .calendar .table td:hover {
580 |   width: 20px;
581 |   height: 20px;
582 |   padding: 5px;
583 |   border-radius: 4px;
584 |   white-space: nowrap;
585 |   cursor: pointer;
586 |   background-color: #eee;
587 |   color: #333;
588 | }
589 | 
590 | .hsy-datepicker .calendar .table td.off {
591 |   color: #ccc;
592 | }
593 | 
594 | .hsy-datepicker .calendar .table td.off:hover {
595 |   background-color: #fff;
596 |   cursor: default;
597 | }
598 | 
599 | .hsy-datepicker .calendar .table td.start {
600 |   background-color: #00A0FF;
601 |   color: #fff;
602 |   border-radius: 4px 0 0 4px;
603 | }
604 | 
605 | .hsy-datepicker .calendar .table td.active {
606 |   background-color: #00A0FF;
607 |   color: #fff;
608 |   border-radius: 4px;
609 | }
610 | 
611 | .hsy-datepicker .calendar .table td.between {
612 |   background-color: #B9E6FF;
613 |   color: #6A7289;
614 | }
615 | 
616 | .hsy-datepicker .calendar .table td.between+td:not(.end):hover {
617 |   border-radius: 0;
618 | }
619 | 
620 | .hsy-datepicker .calendar .table td.between:hover {
621 |   border-radius: 0;
622 |   background-color: #eee;
623 | }
624 | 
625 | .hsy-datepicker .calendar .table td.end {
626 |   background-color: #00A0FF;
627 |   color: #fff;
628 |   border-radius: 0 4px 4px 0;
629 | }
630 | 
631 | .hsy-datepicker .calendar .table td.start.end {
632 |   border-radius: 4px;
633 | }
634 | 
635 | .hsy-datepicker .calendar .confirm {
636 |   text-align: right;
637 |   padding: 10px 0;
638 |   padding-bottom: 0;
639 | }
640 | 
641 | .hsy-datepicker .calendar .confirm button {
642 |   border: 0;
643 |   border-radius: 3px;
644 |   color: #fff;
645 |   width: 80px;
646 |   height: 33px;
647 |   outline: none;
648 |   cursor: pointer;
649 |   font-size: 12px;
650 | }
651 | 
652 | .hsy-datepicker .calendar .confirm button.yes {
653 |   background-color: #00A0FF;
654 | }
655 | 
656 | .hsy-datepicker .calendar .confirm button.yes:disabled {
657 |   background-color: #58B7FF;
658 |   cursor: not-allowed;
659 | }
660 | 
661 | .hsy-datepicker .calendar .confirm button.no {
662 |   background-color: #9B9B9B;
663 |   margin-left: 7px;
664 | }
665 | 
666 | .hsy-datepicker .left {
667 |   float: left;
668 | }
669 | 
670 | .hsy-datepicker .right {
671 |   float: right;
672 | }
673 | 
674 | .hsy-datepicker .calendar .confirm::after {
675 |   content: "";
676 |   clear: both;
677 | }
678 | 
679 | .hsy-datepicker.daterange .table {
680 |   display: inline-block;
681 | }
682 | 
683 | .hsy-datepicker.daterange .table:first-child th.next {
684 |   visibility: hidden;
685 | }
686 | 
687 | .hsy-datepicker.daterange .table:last-child {
688 |   margin-left: 10px;
689 | }
690 | 
691 | .hsy-datepicker.daterange .table:last-child th.prev {
692 |   visibility: hidden;
693 | }
694 | 
695 | .hsy-datepicker.daterange .confirm button {
696 |   float: none
697 | }
698 | 
699 | .hsy-datepicker .selected {
700 |   display: inline-block;
701 |   border: 1px solid #fff;
702 |   border-radius: 5px;
703 |   height: 28px;
704 |   line-height: 28px;
705 |   padding: 0;
706 |   background-color: #0097FF;
707 |   color: #fff;
708 |   outline: none;
709 |   font-size: 0;
710 |   position: relative;
711 |   cursor: pointer;
712 | }
713 | 
714 | .hsy-datepicker .selected>.input {
715 |   display: inline-block;
716 |   padding: 0 15px;
717 |   height: 100%;
718 |   font-size: 12px;
719 |   vertical-align: top;
720 | }
721 | 
722 | .hsy-datepicker .selected>.handler {
723 |   display: inline-block;
724 |   vertical-align: top;
725 |   width: 28px;
726 |   height: 28px;
727 |   background: url('assets/images/light-arrow-down.svg') no-repeat right center;
728 |   background-size: contain;
729 | }
730 | </style>
731 | 


--------------------------------------------------------------------------------
/src/assets/images/arrow-left-white.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg width="6px" height="8px" viewBox="0 0 6 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <defs></defs>
 4 |     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 5 |         <g transform="translate(-647.000000, -254.000000)" fill="#FFFFFF">
 6 |             <g transform="translate(611.000000, 186.000000)">
 7 |                 <g transform="translate(25.000000, 58.000000)">
 8 |                     <polygon transform="translate(14.000000, 14.000000) scale(-1, 1) rotate(-90.000000) translate(-14.000000, -14.000000) " points="10 11 18 11 14 17"></polygon>
 9 |                 </g>
10 |             </g>
11 |         </g>
12 |     </g>
13 | </svg>


--------------------------------------------------------------------------------
/src/assets/images/arrow-right-white.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg width="6px" height="8px" viewBox="0 0 6 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <defs></defs>
 4 |     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 5 |         <g transform="translate(-1038.000000, -254.000000)" fill="#FFFFFF">
 6 |             <g transform="translate(611.000000, 186.000000)">
 7 |                 <g transform="translate(416.000000, 58.000000)">
 8 |                     <polygon transform="translate(14.000000, 14.000000) rotate(-90.000000) translate(-14.000000, -14.000000) " points="10 11 18 11 14 17"></polygon>
 9 |                 </g>
10 |             </g>
11 |         </g>
12 |     </g>
13 | </svg>


--------------------------------------------------------------------------------
/src/assets/images/light-arrow-down.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <defs>
 4 |         <rect id="path-1" x="0" y="0" width="32" height="32" rx="4"></rect>
 5 |         <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="32" height="32" fill="white">
 6 |             <use xlink:href="#path-1"></use>
 7 |         </mask>
 8 |     </defs>
 9 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
10 |         <g id="任务" transform="translate(-1158.000000, -150.000000)">
11 |             <g id="box" transform="translate(220.000000, 120.000000)">
12 |                 <g id="Group" transform="translate(720.000000, 30.000000)">
13 |                     <g id="Group-4" transform="translate(218.000000, 0.000000)">
14 |                         <use id="Rectangle-1-copy-4" stroke="#FFFFFF" mask="url(#mask-2)" stroke-width="2" fill="#FFFFFF" xlink:href="#path-1"></use>
15 |                         <polygon id="Triangle-1" fill="#0E3569" points="12 13 20 13 16 19"></polygon>
16 |                     </g>
17 |                 </g>
18 |             </g>
19 |         </g>
20 |     </g>
21 | </svg>


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Datepicker from './Datepicker'
 2 | 
 3 | const install = (Vue) => {
 4 |   Vue.component(Datepicker.name, Datepicker)
 5 | }
 6 | 
 7 | export default {
 8 |   version: '0.0.3',
 9 |   install
10 | }
11 | 


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