From f5c3e5e9254b7af10ddbc8b5cb81cd78f531e8d1 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期五, 10 六月 2022 14:01:00 +0800
Subject: [PATCH] Merge branch 'Phase3' of ssh://192.168.0.10:29418/pcalife/PAM into Phase3

---
 PAMapp/components/Ui/UiTimePicker.vue |   88 ++++++++++++++++++++++++++++++++++++++++----
 1 files changed, 80 insertions(+), 8 deletions(-)

diff --git a/PAMapp/components/Ui/UiTimePicker.vue b/PAMapp/components/Ui/UiTimePicker.vue
index 6803eae..291fbcd 100644
--- a/PAMapp/components/Ui/UiTimePicker.vue
+++ b/PAMapp/components/Ui/UiTimePicker.vue
@@ -4,6 +4,7 @@
         popper-class="pam-time-popper"
         v-model="timeValue"
         :clearable="false"
+        :editable="false"
         :picker-options="pickerOptions"
         placeholder="������"
         prefix-icon="icon-down down-icon"
@@ -19,14 +20,20 @@
 @Component
 export default class UiTimePicker extends Vue {
     timeValue = '';
-    pickerOptions = {
-        start: '09:00',
-        step: '00:15',
-        end: '21:00'
-    }
 
     @Prop()
     defaultValue!: string;
+
+    @Prop({default: ''})
+    changeDate!: Date | string;
+
+    @Prop()
+    isPastDateDisabled!: boolean;
+
+    @Prop()
+    isFutureDateDisabled!: boolean;
+
+    ///////////////////////////////////////////////////////////////////////
 
     @Emit('changeTime')
     changeTime() {
@@ -36,11 +43,76 @@
     @Watch('defaultValue', {immediate: true})
     updateDefault() {
         if (this.defaultValue) {
-            const hours = new Date(this.defaultValue).getHours();
-            const minutes = new Date(this.defaultValue).getMinutes();
-            this.timeValue = `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
+            const defaultDate = new Date(this.defaultValue);
+            this.timeValue = this.formatTimeString(defaultDate);
             this.changeTime();
         }
     }
+
+    ///////////////////////////////////////////////////////////////////////
+
+    get pickerOptions() {
+        let minTime = '';
+        let maxTime = '';
+        const currentDate = new Date();
+
+        if (this.changeDate && this.isPickedToday(currentDate)) {
+
+            if (this.isPastDateDisabled) {
+                minTime = this.formatTimeString(currentDate);
+                this.isPickedDisableTime(currentDate, minTime);
+            }
+
+            if (this.isFutureDateDisabled) {
+                maxTime = this.formatTimeString(currentDate);
+                this.isPickedDisableTime(currentDate, maxTime);
+            }
+
+        }
+
+        return {
+            start: '09:00',
+            step: '00:15',
+            end: '21:00',
+            minTime: minTime,
+            maxTime: maxTime
+        }
+    }
+
+    private isPickedDisableTime(currentDate: Date, minMaxTime: string) {
+        const currentTime = this.getTimeValue(currentDate, minMaxTime);
+        const pickedTime = this.getTimeValue(currentDate, this.timeValue);
+        if (this.isPastDateDisabled && pickedTime < currentTime) {
+            this.timeValue = '';
+            this.changeTime();
+        }
+        if (this.isFutureDateDisabled && currentTime < pickedTime) {
+            this.timeValue = '';
+            this.changeTime();
+        }
+    }
+
+    private isPickedToday(currentDate: Date) {
+        const pickedDate = new Date(this.changeDate);
+        const today = this.formatDateString(currentDate);
+        const picked = this.formatDateString(pickedDate);
+        return today === picked;
+    }
+
+    private getTimeValue(date: Date, time: string) {
+        const hour = time.split(':')[0];
+        const minute = time.split(':')[1];
+        return date.setHours(+hour, +minute);
+    }
+
+    private formatDateString(date: Date) {
+        return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+    }
+
+    private formatTimeString(date: Date) {
+        const hours = date.getHours();
+        const minutes = date.getMinutes();
+        return `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
+    }
 }
 </script>
\ No newline at end of file

--
Gitblit v1.8.0