Merge pull request #3314 from SergioCrisostomo/fix-3246

Allow disableDate function to limit time-spinner numbers

Merge pull request #3314 from SergioCrisostomo/fix-3246
Allow disableDate function to limit time-spinner numbers
Aresn · GitHub
2 parents 92513e8b 3cd62242
Showing 2 changed files with 57 additions and 6 deletions Show diff stats
src/components/date-picker/panel/Date/date.vue
src/components/date-picker/panel/Time/time.vue
@@ -50,6 +50,7 @@
                     :value="dates"
                     :format="format"
                     :time-disabled="timeDisabled"
+                    :disabled-date="disabledDate"
                     v-bind="timePickerOptions"
                     @on-pick="handlePick"
                     @on-pick-click="handlePickClick"
@@ -150,6 +151,13 @@
             currentView (currentView) {
                 this.$emit('on-selection-mode-change', currentView);
                 this.pickertable = this.getTableType(currentView);
+
+                if (this.currentView === 'time') {
+                    this.$nextTick(() => {
+                        const spinner = this.$refs.timePicker.$refs.timeSpinner;
+                        spinner.updateScroll();
+                    });
+                }
             },
             selectionMode(type){
                 this.currentView = type;
@@ -186,6 +194,7 @@
                 else if (selectionMode === 'month') value = new Date(panelDate.getFullYear(), value.getMonth(), 1);
                 else value = new Date(value);
  
+                this.dates = [value];
                 this.$emit('on-pick', value);
             },
         },
@@ -7,12 +7,12 @@
                     ref="timeSpinner"
                     :show-seconds="showSeconds"
                     :steps="steps"
-                    :hours="value[0] && date.getHours()"
-                    :minutes="value[0] && date.getMinutes()"
-                    :seconds="value[0] && date.getSeconds()"
-                    :disabled-hours="disabledHours"
-                    :disabled-minutes="disabledMinutes"
-                    :disabled-seconds="disabledSeconds"
+                    :hours="timeSlots[0]"
+                    :minutes="timeSlots[1]"
+                    :seconds="timeSlots[2]"
+                    :disabled-hours="disabledHMS.disabledHours"
+                    :disabled-minutes="disabledHMS.disabledMinutes"
+                    :disabled-seconds="disabledHMS.disabledSeconds"
                     :hide-disabled-options="hideDisabledOptions"
                     @on-change="handleChange"
                     @on-pick-click="handlePickClick"></time-spinner>
@@ -39,12 +39,25 @@
     const timePrefixCls = 'ivu-time-picker';
  
     const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
+    const mergeDateHMS = (date, hours, minutes, seconds) => {
+        const newDate = new Date(date.getTime());
+        newDate.setHours(hours);
+        newDate.setMinutes(minutes);
+        newDate.setSeconds(seconds);
+        return newDate;
+    };
+    const unique = (el, i, arr) => arr.indexOf(el) === i;
+    const returnFalse = () => false;
  
     export default {
         name: 'TimePickerPanel',
         mixins: [ Mixin, Locale, Options ],
         components: { TimeSpinner, Confirm },
         props: {
+            disabledDate: {
+                type: Function,
+                default: returnFalse
+            },
             steps: {
                 type: Array,
                 default: () => []
@@ -76,6 +89,35 @@
                 const tYear = this.t('i.datepicker.year');
                 const tMonth = this.t(`i.datepicker.month${month}`);
                 return `${date.getFullYear()}${tYear} ${tMonth}`;
+            },
+            timeSlots(){
+                if (!this.value[0]) return [];
+                return ['getHours', 'getMinutes', 'getSeconds'].map(slot => this.date[slot]());
+            },
+            disabledHMS(){
+                const disabledTypes = ['disabledHours', 'disabledMinutes', 'disabledSeconds'];
+                if (this.disabledDate === returnFalse || !this.value[0]) {
+                    const disabled = disabledTypes.reduce(
+                        (obj, type) => (obj[type] = this[type], obj), {}
+                    );
+                    return disabled;
+                } else {
+                    const slots = [24, 60, 60];
+                    const disabled = ['Hours', 'Minutes', 'Seconds'].map(type => this[`disabled${type}`]);
+                    const disabledHMS = disabled.map((preDisabled, j) => {
+                        const slot = slots[j];
+                        const toDisable = preDisabled;
+                        for (let i = 0; i < slot; i+= (this.steps[j] || 1)){
+                            const hms = this.timeSlots.map((slot, x) => x === j ? i : slot);
+                            const testDateTime = mergeDateHMS(this.date, ...hms);
+                            if (this.disabledDate(testDateTime, true)) toDisable.push(i);
+                        }
+                        return toDisable.filter(unique);
+                    });
+                    return disabledTypes.reduce(
+                        (obj, type, i) => (obj[type] = disabledHMS[i], obj), {}
+                    );
+                }
             }
         },
         watch: {