support prop:compute-days-function for dynamically setting days (close …

…#1992)
airyland · Sep 18, 2017 · c414ef5 · c414ef5
1 parent 0b3d663
commit c414ef5
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 1 deletion.
diff --git a/src/components/datetime/datetimepicker.js b/src/components/datetime/datetimepicker.js
@@ -68,6 +68,7 @@ const DEFAULT_CONFIG = {
   destroyOnHide: false,
   renderInline: false,
   computeHoursFunction: null,
+  computeDaysFunction: null,
   isOneInstance: false
 }
 
@@ -359,6 +360,23 @@ DatetimePicker.prototype = {
       })
     }
 
+    if (type === 'day' && this.config.computeDaysFunction) {
+      const rs = this.config.computeDaysFunction({
+        year,
+        month,
+        min,
+        max
+      }, generateRange)
+      if (rs) {
+        data = rs.map(day => {
+          return {
+            name: parseRow(config['dayRow'], addZero(day)),
+            value: addZero(day)
+          }
+        })
+      }
+    }
+
     if (type === 'hour' && this.config.computeHoursFunction) {
       const isTodayVal = isToday(new Date(`${year}/${month}/${day}`), new Date())
       const rs = this.config.computeHoursFunction(`${year}-${month}-${day}`, isTodayVal, generateRange)

diff --git a/src/components/datetime/index.vue b/src/components/datetime/index.vue
@@ -127,11 +127,13 @@ export default {
     minuteList: Array,
     show: Boolean,
     defaultSelectedValue: String,
-    computeHoursFunction: Function
+    computeHoursFunction: Function,
+    computeDaysFunction: Function
   },
   created () {
     this.isFirstSetValue = false
     this.currentValue = this.value
+    console.log(this.computeDaysFunction)
   },
   data () {
     return {
@@ -173,6 +175,7 @@ export default {
         minuteList: this.minuteList,
         defaultSelectedValue: this.defaultSelectedValue,
         computeHoursFunction: this.computeHoursFunction,
+        computeDaysFunction: this.computeDaysFunction,
         onSelect (type, val, wholeValue) {
           if (_this.picker && _this.picker.config.renderInline) {
             _this.$emit('input', wholeValue)

diff --git a/src/components/datetime/metas.yml b/src/components/datetime/metas.yml
@@ -139,6 +139,11 @@ props:
     type: Function
     en: 'dynamically set hours list, params `(value, isToday, generateRange)`'
     zh-CN: '动态设置小时列表，参数为 `(value, isToday, generateRange)`'
+  compute-days-function:
+    version: next
+    type: Function
+    en: 'dynamically set days list, params `({year, month, min, max}, generateRange)`'
+    zh-CN: '动态设置日期列表，参数为 `({year, month, min, max}, generateRange)`'
 slots:
   title:
     version: v2.3.6
@@ -150,6 +155,11 @@ events:
     en: $emits when value changes, `(newVal)`
     zh-CN: 表单值变化时触发, 参数 `(newVal)`
 changes:
+  next:
+    en:
+      - '[feature] support prop:compute-days-function for dynamically setting days #1992'
+    zh-CN:
+      - '[feature] 支持属性 compute-days-function 用以动态设置日期 #1992 '
   v2.6.0:
     en:
       - '[fix] fix i18n for cancel_text confirm_text'

diff --git a/src/demos/Datetime.vue b/src/demos/Datetime.vue
@@ -68,6 +68,10 @@
       <datetime format="YYYY-MM-DD HH" v-model="computeHoursValue" :compute-hours-function="computeHoursFunction" :title="$t('Birthday')"></datetime>
     </group>
 
+    <group :title="$t('prop:compute-days-function')">
+      <datetime format="YYYY-MM-DD HH" v-model="computeDaysValue" :compute-days-function="computeDaysFunction" :title="$t('Birthday')"></datetime>
+    </group>
+
     <group :title="$t('specified template text in Chinese')">
       <datetime v-model="value5" :placeholder="$t('Please select')" :min-year=2000 :max-year=2016 format="YYYY-MM-DD HH:mm" @on-change="change" :title="$t('Chinese')" year-row="{value}年" month-row="{value}月" day-row="{value}日" hour-row="{value}点" minute-row="{value}分" confirm-text="完成" cancel-text="取消"></datetime>
     </group>
@@ -152,6 +156,10 @@ Used as a plugin:
   zh-CN: 插件形式调用
 set default-selected-value to 2017-11-11:
   zh-CN: 设置默认选中值为 2017-11-11
+'prop:compute-hours-function':
+  zh-CN: 自定义小时列表生成逻辑
+'prop:compute-days-function':
+  zh-CN: 自定义日期列表生成逻辑
 </i18n>
 
 <script>
@@ -189,12 +197,16 @@ export default {
       value9: '',
       visibility: false,
       computeHoursValue: '',
+      computeDaysValue: '',
       computeHoursFunction (date, isToday, generateRange) {
         if (isToday) {
           return generateRange(new Date().getHours(), 23)
         } else {
           return generateRange(0, 23)
         }
+      },
+      computeDaysFunction (options, generateRange) {
+        return [options.month] // if current month is n, days are [n]
       }
     }
   },