├── README.md
├── edit_time.vue
└── img
    ├── 8lnm5-3tu3f.gif
    ├── WX20200115-194928@2x.png
    └── WX20200115-194949@2x.png


/README.md:
--------------------------------------------------------------------------------
  1 | # vue-datetime
  2 | 使用vue编写的时间组件，小巧实用，支持vue1.0，vue2.0  
  3 | ```
  4 | v1.0 功能:  
  5 | 1.支持同时展开多个日期选择框  
  6 | 2.支持单击选中和取消，可配置单选和多选  
  7 | 3.支持双击启动连续选择，支持正向连续，逆向连续和跳跃不可选日期  
  8 | 4.支持在日期选择框内直接切换月份  
  9 | 5.支持初始化不可点击日期(剩余的可选择)  
 10 | 6.支持初始化已选择日期(已选择日期高亮)  
 11 | 7.支持初始化可选择日期(剩余的不可选择)  
 12 | 8.同时初始化不可点击和可点击日期，将以可点击日期为准  
 13 | ```
 14 | 
 15 | ```
 16 | v1.1:  
 17 | 1.修复已知bug  
 18 | ```
 19 | 
 20 | ```
 21 | v1.2:  
 22 | 1.重构代码，使代码更优雅和简洁  
 23 | 2.性能优化
 24 | 3.完善功能，使多时间框和原地切换时间共存
 25 | 4.支持不传入options 和datelist的使，默认显示当前日期并且可原地切换日期
 26 | ```
 27 | 
 28 | ```
 29 | v1.3:  
 30 | 1.增加年份和月份的快速选择
 31 | ```
 32 | 
 33 | ```
 34 | v1.4:  
 35 | 1.优化代码
 36 | ```
 37 | 
 38 | 用法：`<edit-time :datelist='datelist' :options='options'></edit-time>`
 39 | 
 40 |     datelist = [
 41 |         {
 42 |             year: undefined, // 日期初始年, 默认当前年
 43 |             month: undefined, // 日期初始月, 默认当前月
 44 |             multiSelect: true, // 日期是否可多选
 45 |             switch: false // 当前日期框是否支持切换年月份
 46 |         }
 47 |     ]
 48 |     options = {
 49 |     disable: [], // 不可选日期，格式: '2016-01-01'
 50 |     // enable: [], // 可选日期，格式: '2016-01-01'，enable和disable只能有一个，如果都有默认用enable
 51 |     selected: [], // 已选择的day，格式: '2016-01-01'
 52 |     callback: undefined // 点击日期回调函数, callback(selectDateList)
 53 |     }
 54 | 
 55 | 图示:
 56 | <img src = "https://github.com/Stephen1993/vue-datetime/blob/master/img/8lnm5-3tu3f.gif" display = "flex" width = "300px" height = "300px" >
 57 | 
 58 | 示例：
 59 | ```
 60 | <template>
 61 |   <div>
 62 |     <edit-time :datelist='datelist' :options='options'></edit-time>
 63 |   </div>
 64 | </template>
 65 | 
 66 | <script>
 67 | import editTime from '../components/edit_time'
 68 | 
 69 | let datelist = [
 70 |   {
 71 |     year: undefined, // 日期初始年, 默认当前年
 72 |     month: undefined, // 日期初始月, 默认当前月
 73 |     multiSelect: true, // 日期是否可多选
 74 |     switch: false // 当前日期框是否支持切换年月份
 75 |   }
 76 | ]
 77 | 
 78 | let options = {
 79 |   disable: [], // 不可选日期，格式: '2016-01-01'
 80 |   // enable: [], // 可选日期，格式: '2016-01-01'，enable和disable只能有一个，如果都有默认用enable
 81 |   selected: [], // 已选择的day，格式: '2016-01-01'
 82 |   callback: undefined // 点击日期回调函数, callback(selectDateList)
 83 | }
 84 | 
 85 | export default {
 86 |   name: 'test',
 87 |   data () {
 88 |     return {
 89 |       datelist: datelist,
 90 |       options: options
 91 |     }
 92 |   },
 93 |   components: {
 94 |     editTime
 95 |   }
 96 | }
 97 | 
 98 | </script>
 99 | ```
100 | 


--------------------------------------------------------------------------------
/edit_time.vue:
--------------------------------------------------------------------------------
  1 | <style lang="scss">
  2 | .edit-time-components {
  3 |   overflow: hidden;
  4 |   line-height: normal;
  5 |   div, ul, li, p{
  6 |     padding: 0;
  7 |     margin: 0;
  8 |     background: none;
  9 |     border: none;
 10 |     outline: none;
 11 |     user-select: none;
 12 |     -webkit-user-select: none;
 13 |     -moz-user-select: none;
 14 |   }
 15 | 
 16 |   .year-month-box {
 17 |     text-align: center;
 18 |     .year-month {
 19 |       display: inline-block;
 20 |       font-size: 20px;
 21 |       color: #7b7777;
 22 |       span {
 23 |         display: inline-block;
 24 |         cursor: pointer;
 25 |         &:hover {
 26 |           color: #2494f2;
 27 |         }
 28 |       }
 29 |     }
 30 |     .year-list-box {
 31 |       display: inline-block;
 32 |       position: relative;
 33 |       .year-list, .month-list {
 34 |         position: absolute;
 35 |         background: #fff;
 36 |         width: 65px;
 37 |         height: 200px;
 38 |         overflow-y: auto;
 39 |         border: 1px solid #ddd;
 40 |         left: 0;
 41 |         text-align: center;
 42 |         .year-item, .month-item {
 43 |           cursor: pointer;
 44 |           color: #333;
 45 |           font-size: 14px;
 46 |           padding: 3px 0px;
 47 |           &:hover {
 48 |             background: #e6e6e6;
 49 |           }
 50 |         }
 51 |       }
 52 |       .month-list {
 53 |         left: initial;
 54 |         right: 0;
 55 |       }
 56 |     }
 57 |     .pre-month, .next-month {
 58 |       display: inline-block;
 59 |       color: #7b7777;
 60 |       cursor: pointer;
 61 |       transform: scaleY(1.5);
 62 |       height: 13px;
 63 |       line-height: 6px;
 64 |       vertical-align: middle;
 65 |       padding: 0 5px;
 66 |       &:hover {
 67 |         color: #2494f2;
 68 |       }
 69 |     }
 70 |   }
 71 | 
 72 |   .time-box {
 73 |     background: #fff;
 74 |     width: 240px;
 75 |     text-align: center;
 76 |     float: left;
 77 |     margin: 5px;
 78 |     border: 1px solid #ddd;
 79 |     padding: 5px;
 80 |     box-sizing: content-box;
 81 |     overflow: hidden;
 82 |   }
 83 | 
 84 |   .li-item {
 85 |     display: inline-block;
 86 |     float: left;
 87 |     width: 34px;
 88 |     height: 34px;
 89 |     line-height: 34px;
 90 |     font-size: 15px;
 91 |     text-align: center;
 92 |     border-radius: 50%;
 93 |   }
 94 | 
 95 |   .week {
 96 |     color: #b5b5b5;
 97 |     padding: 0;
 98 |   }
 99 | 
100 |   .day {
101 |     cursor: pointer;
102 |     &:hover {
103 |       background: #ddd;
104 |     }
105 |   }
106 | 
107 |   .ul-box {
108 |     width: 100%;
109 |   }
110 | 
111 |   .disable {
112 |     color: rgba(57, 57, 57, .3);
113 |     cursor: not-allowed;
114 |     &:hover {
115 |       background: none;
116 |     }
117 |   }
118 | }
119 | </style>
120 | 
121 | <template>
122 |   <div class='edit-time-components'>
123 |     <div id='{{index}}' class='time-box' v-for='(index, item) in dateList'>
124 |       <div class='year-month-box'>
125 |         <p v-if='item.switch' class='pre-month' @click='changeYearMonth(item.year, item.month - 1, index)'>&lt;</p>
126 |         <div v-if='item.switch' class='year-list-box'>
127 |           <div class='year-month'><span @click='yearMonthList($event, index, 0)'>{{item.year}}年</span><span @click='yearMonthList($event, index, 1)'>{{item.month}}月</span></div>
128 |           <ul v-if='showYearList === index' @mousewheel='mousewheel($event)' class='year-list'>
129 |             <li v-for='y in 25' @click='changeYearMonth(2000 + y, item.month, index)' class='year-item'>{{2000 + y}}年</li>
130 |           </ul>
131 |           <ul v-if='showMonthList === index' @mousewheel='mousewheel($event)' class='month-list'>
132 |             <li v-for='m in 12' @click='changeYearMonth(item.year, m + 1, index)' class='month-item'>{{m + 1}}月</li>
133 |           </ul>
134 |         </div>
135 |         <p v-if='!item.switch' class='year-month'>{{item.year + '年' + item.month + '月'}}</p>
136 |         <p v-if='item.switch' class='next-month' @click='changeYearMonth(item.year, item.month + 1, index)'>&gt;</p>
137 |       </div>
138 |       <ul class='ul-box'>
139 |         <li class='li-item week'>周日</li>
140 |         <li class='li-item week'>周一</li>
141 |         <li class='li-item week'>周二</li>
142 |         <li class='li-item week'>周三</li>
143 |         <li class='li-item week'>周四</li>
144 |         <li class='li-item week'>周五</li>
145 |         <li class='li-item week'>周六</li>
146 |       </ul>
147 |       <ul class='ul-box'>
148 |         <li class='li-item' v-for='i in item.week'></li>
149 |         <li
150 |           v-for='i in item.monthDay'
151 |           id='{{item.id + "-" + (i + 1)}}'
152 |           class='{{"li-item day" + (isDisable(item.year, item.month, i + 1) ? " disable" : "")}}'
153 |           :style = '{
154 |             background: (selected.has(formatDate(item.year, item.month, i + 1)) ? "#5bc0de" : ""),
155 |             color: (selected.has(formatDate(item.year, item.month, i + 1)) ? "#fff" : "")
156 |           }'
157 |           select = '{{(selected.has(formatDate(item.year, item.month, i + 1)) ? "true" : "false")}}'
158 |           data-index = '{{i + 1}}'
159 |           @click='dateClick($event, item, i + 1)'
160 |           @dblclick='dbDateClick($event, item, i + 1)'
161 |           @mouseover='mouseover(item, i + 1)'>
162 |           {{i + 1}}
163 |         </li>
164 |       </ul>
165 |     </div>
166 |   </div>
167 | </template>
168 | 
169 | <script type="text/javascript">
170 | /*
171 | 组件功能:
172 | 1.可选择月份展开显示或者作为一个时间框显示
173 | 2.可单击选中，支持多选
174 | 3.可双击启动连续选择，支持正向，逆向和跳跃不可选日期
175 | 4.可原地切换日期
176 | */
177 | let DEFAULT_DATELIST = [
178 |   {
179 |     year: undefined, // 日期初始年, 默认当前年
180 |     month: undefined, // 日期初始月, 默认当前月
181 |     multiSelect: true, // 日期是否可多选, 默认多选
182 |     switch: true // 当前日期框是否支持切换年月份, 默认关闭(组件默认日期框为开启)
183 |   }
184 | ]
185 | let DEFAULT_OPTIONS = {
186 |   disable: [], // 不可选日期，格式: '2016-01-01'
187 |   // enable: [], // 可选日期，格式: '2016-01-01'，enable和disable只能有一个，如果都有默认用enable
188 |   selected: [], // 已选择的day，格式: '2016-01-01'
189 |   callback: undefined // 点击日期回调函数, callback(selectDateList)
190 | }
191 | 
192 | export default {
193 |   name: 'editTime',
194 |   props: {
195 |     datelist: {
196 |       type: Array,
197 |       required: false,
198 |       default: function () {
199 |         return DEFAULT_DATELIST
200 |       },
201 |       coerce: function(val) {
202 |         return val.length === 0 ? DEFAULT_DATELIST : val
203 |       }
204 |     },
205 | 
206 |     options: {
207 |       type: Object,
208 |       required: false,
209 |       default: function() {
210 |         return DEFAULT_OPTIONS
211 |       },
212 |       coerce: function(val) {
213 |         val.disable = val.disable || []
214 |         val.selected = val.selected || []
215 |         return val
216 |       }
217 |     }
218 |   },
219 | 
220 |   data() {
221 |     return {
222 |       dateList: [],
223 |       selected: new Set(),
224 |       isdbclick: false,
225 |       domId: null,
226 |       dbDay: null,
227 |       dom: new Array(33),
228 |       showYearList: null,
229 |       showMonthList: null
230 |     }
231 |   },
232 | 
233 |   methods: {
234 |     mousewheel(event) {
235 |       let pNode = event.currentTarget
236 |       let scrollTop = pNode.scrollTop
237 |       let scrollHeight = pNode.scrollHeight
238 |       let height = pNode.clientHeight
239 |       let delta = (event.wheelDelta) ? event.wheelDelta : -(event.detail || 0)
240 | 
241 |       if((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
242 |         // IE浏览器下滚动会跨越边界直接影响父级滚动，因此，临界时候手动边界滚动定位
243 |         pNode.scrollTop = delta > 0 ? 0 : scrollHeight;
244 |         // 向上滚 || 向下滚
245 |         event.preventDefault();
246 |       }
247 |     },
248 | 
249 |     hideList() {
250 |       this.showYearList = null
251 |       this.showMonthList = null
252 |     },
253 | 
254 |     yearMonthList(event, index, type) { // type = 0表示年，1表示月
255 |       event.stopPropagation()
256 |       this.hideList()
257 |       if(type === 0) {
258 |         this.showYearList = index
259 |       }else if(type === 1) {
260 |         this.showMonthList = index
261 |       }
262 |     },
263 | 
264 |     changeYearMonth(year, month, index) {
265 |       this.isdbclick = false // 切换日期后一定要将双击记录清空
266 |       this.domId = null
267 |       let date = JSON.parse(JSON.stringify(this.dateList[index]))
268 |       if(month < 1) {
269 |         year -= 1
270 |         month = 12
271 |       }else if(month > 12) {
272 |         year += 1
273 |         month = 1
274 |       }
275 |       date.year = year
276 |       date.month = month
277 |       this.getDayConfig(date)
278 |       this.dateList.$set(index, date)
279 |     },
280 | 
281 |     isDisable(year, month, day) {
282 |       let date = this.formatDate(year, month, day)
283 |       if(this.options.enable) {
284 |         return this.options.enable.indexOf(date) === -1
285 |       }else {
286 |         return this.options.disable.indexOf(date) !== -1
287 |       }
288 |     },
289 | 
290 |     formatDate(year, month, day) {
291 |       month = (month + '').length === 2 ? month : '0' + month
292 |       day = (day + '').length === 2 ? day : '0' + day
293 |       return year + '-' + month + '-' + day
294 |     },
295 | 
296 |     init(options, datelist) {
297 |       // init data
298 |       this.isdbclick = false
299 |       this.domId = null
300 |       this.dbDay = null
301 |       // this.dom = new Array(33)
302 | 
303 |       let tempList = JSON.parse(JSON.stringify(datelist))
304 |       tempList.forEach((item, index) => {
305 |         item.id = index // 对整个时间框的初始化配置, 时间框id
306 |         item.lastSelect = null // 对整个时间框的初始化配置, 时间框最近一次选择的时间
307 |         this.getDayConfig(item) // 对每一次显示的时间的初始化配置
308 |       })
309 |       this.selected = new Set(options.selected)
310 |       this.dateList = tempList
311 |     },
312 | 
313 |     getDayConfig(item) {
314 |       let year = item.year || (new Date()).getFullYear()
315 |       let month = item.month || (parseInt((new Date()).getMonth()) + 1)
316 |       let monthDay = (new Date(year, month, 0)).getDate()
317 |       let week = (new Date(year, parseInt(month - 1), 1)).getDay()
318 | 
319 |       item.year = parseInt(year)
320 |       item.month = parseInt(month)
321 |       item.monthDay = monthDay
322 |       item.week = week
323 |     },
324 | 
325 |     getdbClickData(item) {
326 |       for(let i = 1; i <= item.monthDay; ++i) {
327 |         let dom = this.dom[i]
328 |         let tMonth = (item.month + '').length === 2 ? item.month : '0' + item.month
329 |         let tDay = (i + '').length === 2 ? i : '0' + i
330 |         let date = item.year + '-' + tMonth + '-' + tDay
331 |         if(dom.style.background !== '') {
332 |           dom.setAttribute('select', 'true')
333 |           this.selected.add(date)
334 |         }
335 |       }
336 |     },
337 | 
338 |     cleardbClick() {
339 |       for(let i = 1; i <= this.dom.length; ++i) {
340 |         let dom = this.dom[i]
341 |         if(!dom) return
342 |         if(dom.getAttribute('select') !== 'true') {
343 |           dom.style.background = ''
344 |           dom.style.color = '#000'
345 |         }
346 |       }
347 |     },
348 | 
349 |     dateClick(event, item, day) {
350 |       if(this.isDisable(item.year, item.month, day)) return
351 | 
352 |       if(this.isdbclick) {
353 |         if(item.id === this.domId) {
354 |           this.isdbclick = false
355 |           this.getdbClickData(item)
356 |           if(this.options.callback) {
357 |             this.options.callback([...this.selected])
358 |           }
359 |           return
360 |         }else {
361 |           this.cleardbClick()
362 |         }
363 |       }
364 | 
365 |       this.isdbclick = false
366 |       let date = this.formatDate(item.year, item.month, day)
367 |       if(event.target.getAttribute('select') !== 'true') {
368 |         if(item.multiSelect === false && item.lastSelect) {
369 |           this.selected.delete(this.formatDate(item.year, item.month, item.lastSelect))
370 |           let lastDom = document.getElementById(item.id + '-' + item.lastSelect)
371 |           lastDom.style.background = ''
372 |           lastDom.style.color = '#000'
373 |           lastDom.setAttribute('select', 'false')
374 |         }
375 |         event.target.style.background = '#5bc0de'
376 |         event.target.style.color = '#fff'
377 |         event.target.setAttribute('select', 'true')
378 |         this.selected.add(date)
379 |         item.lastSelect = day
380 |       }else {
381 |         event.target.style.background = ''
382 |         event.target.style.color = '#000'
383 |         event.target.setAttribute('select', 'false')
384 |         this.selected.delete(date)
385 |       }
386 |       if(this.options.callback) {
387 |         this.options.callback([...this.selected])
388 |       }
389 |     },
390 | 
391 |     dbDateClick(event, item, day) {
392 |       if(item.multiSelect === false) return
393 |       if(this.isDisable(item.year, item.month, day)) return
394 | 
395 |       event.target.style.background = '#5bc0de'
396 |       event.target.style.color = '#fff'
397 |       let id = item.id
398 |       this.isdbclick = true
399 |       this.dbDay = day
400 |       if(this.domId === id) {
401 |         return
402 |       }
403 |       this.domId = item.id
404 |       let dom = document.getElementById(id + '').getElementsByClassName('day')
405 |       for(let i = 0; i < dom.length; ++i) {
406 |         let item = dom[i]
407 |         this.dom[item.dataset.index] = item
408 |       }
409 |       this.dom[dom.length + 1] = null // 这句作用于上面cleardbClick的if(!dom) return
410 |     },
411 | 
412 |     mouseover(item, day) {
413 |       if(!this.isdbclick || !this.dbDay) return
414 |       if(this.domId !== item.id) return
415 | 
416 |       let left = day > this.dbDay ? this.dbDay : day
417 |       let right = day > this.dbDay ? day : this.dbDay
418 |       for(let i = 1; i <= item.monthDay; ++i) {
419 |         if(this.isDisable(item.year, item.month, i)) continue
420 | 
421 |         let dom = this.dom[i]
422 |         if(left <= i && i <= right) {
423 |           dom.style.background = '#5bc0de'
424 |           dom.style.color = '#fff'
425 |         }else if(dom.getAttribute('select') !== 'true') {
426 |           dom.style.background = ''
427 |           dom.style.color = '#000'
428 |         }
429 |       }
430 |     }
431 |   },
432 | 
433 |   watch: {
434 |     datelist: function(val, oldVal) {
435 |       this.init(this.options, val)
436 |     },
437 | 
438 |     options: {
439 |       handler: function(val, oldVal) { // 此处不建议深度监听，根据业务需求判断是否采用深度监听
440 |         this.init(val, this.datelist)
441 |       },
442 |       deep: true
443 |     }
444 |   },
445 | 
446 |   created: function() {
447 |     this.init(this.options, this.datelist)
448 |     document.addEventListener('click', this.hideList) // 点击日期之外的隐藏日期选择
449 |   },
450 | 
451 |   destroyed: function() {
452 |     document.removeEventListener('click', this.hideList)
453 |   }
454 | }
455 | </script>
456 | 


--------------------------------------------------------------------------------
/img/8lnm5-3tu3f.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stephen1993/vue-datetime/8e3aa3a52c9b277e2fd312f52cd93f034bd6c958/img/8lnm5-3tu3f.gif


--------------------------------------------------------------------------------
/img/WX20200115-194928@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stephen1993/vue-datetime/8e3aa3a52c9b277e2fd312f52cd93f034bd6c958/img/WX20200115-194928@2x.png


--------------------------------------------------------------------------------
/img/WX20200115-194949@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Stephen1993/vue-datetime/8e3aa3a52c9b277e2fd312f52cd93f034bd6c958/img/WX20200115-194949@2x.png


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