inline-calendar: support multi select (Close #1446) (#1467)

Author: xiaolongyuan

src/components/inline-calendar/index.vue

@@ -34,7 +34,7 @@
           v-for="(child,k2) in day"
           :data-date="formatDate(year, month, child)"
           :data-current="currentValue"
-          :class="buildClass(k2, child, formatDate(year, month, child) === currentValue && !child.isLastMonth && !child.isNextMonth)"
+          :class="buildClass(k2, child)"
           @click="select(k1,k2,child)">
             <slot
             :year="year"
@@ -68,19 +68,28 @@ export default {
   props: props(),
   data () {
     return {
+      multi: false,
       year: 0,
       month: 0,
       days: [],
       today: format(new Date(), 'YYYY-MM-DD'),
-      months: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+      months: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
       currentValue: ''
     }
   },
   created () {
     this.currentValue = this.value
+    this.multi = Object.prototype.toString.call(this.currentValue) === '[object Array]'
   },
   mounted () {
-    this.currentValue = this.convertDate(this.currentValue)
+    if (this.multi) {
+      for (let i = 0; i < this.currentValue.length; i++) {
+        this.$set(this.currentValue, i, this.convertDate(this.currentValue[i]))
+      }
+    } else {
+      this.currentValue = this.convertDate(this.currentValue)
+    }
+
     this.render(this.renderMonth[0], this.renderMonth[1] - 1)
   },
   computed: {
@@ -101,17 +110,17 @@ export default {
   },
   watch: {
     value (val) {
-      this.currentValue = val
+      this.currentValue = this.multi ? val : this.convertDate(val)
     },
     currentValue (val) {
-      this.currentValue = this.convertDate(val)
+      const value = this.multi ? this.currentValue[this.currentValue.length - 1] : this.currentValue
       if (this.renderOnValueChange) {
-        this.render(null, null, val)
+        this.render(null, null, value)
       } else {
-        this.render(this.year, this.month, this.currentValue)
+        this.render(this.year, this.month, value)
       }
-      this.$emit('input', val)
-      this.$emit('on-change', val)
+      this.$emit('input', this.currentValue)
+      this.$emit('on-change', this.currentValue)
     },
     renderFunction () {
       this.render(this.year, this.month, this.currentValue)
@@ -149,7 +158,15 @@ export default {
     convertDate (date) {
       return date === 'TODAY' ? this.today : date
     },
-    buildClass (index, child, isCurrent) {
+    buildClass (index, child) {
+      let isCurrent = false
+      if (!child.isLastMonth && !child.isNextMonth) {
+        if (this.multi && this.currentValue.length > 0) {
+          isCurrent = this.currentValue.indexOf(this.formatDate(this.year, this.month, child)) > -1
+        } else {
+          isCurrent = this.currentValue === this.formatDate(this.year, this.month, child)
+        }
+      }
       const className = {
         current: child.current || isCurrent,
         'is-disabled': child.disabled,
@@ -159,10 +176,12 @@ export default {
       return className
     },
     render (year, month) {
-      let data = getDays({
+      let data = null
+      const value = this.multi ? this.currentValue[this.currentValue.length - 1] : this.currentValue
+      data = getDays({
         year: year,
         month: month,
-        value: this.currentValue,
+        value,
         rangeBegin: this.convertDate(this.startDate),
         rangeEnd: this.convertDate(this.endDate),
         returnSixRows: this.returnSixRows,
@@ -207,12 +226,42 @@ export default {
       if (!data.isBetween) {
         return
       }
+      let _currentValue = null
       if (!data.isLastMonth && !data.isNextMonth) {
         this.days[k1][k2].current = true
-        this.currentValue = [this.year, zero(this.month + 1), zero(this.days[k1][k2].day)].join('-')
+        _currentValue = [this.year, zero(this.month + 1), zero(this.days[k1][k2].day)].join('-')
+      } else {
+        _currentValue = [data.year, zero(data.month + 1), zero(data.day)].join('-')
+      }
+      if (this.multi) {
+        let index = this.currentValue.indexOf(_currentValue)
+        if (index > -1) {
+          this.currentValue.splice(index, 1)
+        } else {
+          this.currentValue.push(_currentValue)
+        }
+      } else {
+        this.currentValue = this.currentValue === _currentValue ? '' : _currentValue
+      }
+
+      this.currentValueChange()
+    },
+    currentValueChange () {
+      if (this.multi) {
+        for (let i = 0; i < this.currentValue.length; i++) {
+          this.$set(this.currentValue, i, this.convertDate(this.currentValue[i]))
+        }
       } else {
-        this.currentValue = [data.year, zero(data.month + 1), zero(data.day)].join('-')
+        this.currentValue = this.convertDate(this.currentValue)
       }
+      const value = this.multi ? this.currentValue[this.currentValue.length - 1] : this.currentValue
+      if (this.renderOnValueChange) {
+        this.render(null, null, value)
+      } else {
+        this.render(this.year, this.month, value)
+      }
+      this.$emit('input', this.currentValue)
+      this.$emit('on-change', this.currentValue)
     },
     showChild (year, month, child) {
       if (this.replaceText(child.day, this.formatDate(year, month, child))) {
@@ -224,7 +273,7 @@ export default {
   }
 }
 </script>
- 
+
 <style lang="less">
 @import '../../styles/variable.less';
 

src/components/inline-calendar/metas.yml

@@ -8,7 +8,7 @@ tags:
     - 表单
 props:
   value:
-    type: String
+    type: String, Array
     default: ''
     en: calendar value, use `v-modle` for binding
     zh-CN: 当前选中日期，使用`v-model`绑定，默认为空，即选中当天日期
@@ -97,6 +97,26 @@ events:
     en: emits when value is changed
     zh-CN: 值变化时触发
 changes:
+  v2.4.0:
+    en:
+      - '[enhance] re-render when render-month is changed'
+    zh-CN:
+      - '[enhance] 当 render-month 变化时重新渲染日历'
+  v2.3.8:
+    en:
+      - '[enhance] prevent from clicking invisiable date #1564'
+    zh-CN:
+      - '[enhance] 不可见日期不可点击 #1564'
+  v2.3.6:
+    en:
+      - '[change] render-function params day => date #1361'
+    zh-CN:
+      - '[change] render-function 参数 day => date（在 3.0 版本前不会影响目前使用）#1361'
+  v2.3.5:
+    en:
+      - '[feature] support multi select #1446 #1467'
+    zh-CN:
+      - '[feature] 支持多选 #1446 #1467'
   v2.4.0:
     en:
       - '[enhance] re-render when render-month is changed'

src/components/inline-calendar/props.js

@@ -1,6 +1,6 @@
 export default () => ({
   value: {
-    type: String,
+    type: [String, Array],
     default: ''
   },
   renderMonth: {