From abc1e8353491b3abf7d638cc11b48b137816382d Mon Sep 17 00:00:00 2001 From: Mila <Mila@pollex.com.tw> Date: 星期六, 22 一月 2022 16:01:12 +0800 Subject: [PATCH] fixed: TODO#134588 約訪時間/約訪記錄顯示必填「*」 --- PAMapp/components/Ui/UiDatePicker.vue | 35 ++++++++++++++++++++++++++++++++--- 1 files changed, 32 insertions(+), 3 deletions(-) diff --git a/PAMapp/components/Ui/UiDatePicker.vue b/PAMapp/components/Ui/UiDatePicker.vue index 56bdc58..20132bc 100644 --- a/PAMapp/components/Ui/UiDatePicker.vue +++ b/PAMapp/components/Ui/UiDatePicker.vue @@ -7,22 +7,51 @@ type="date" format="yyyy/MM/dd" placeholder="������" - prefix-icon="icon-down" + prefix-icon="icon-down down-icon" + :picker-options="pickerOptions" @change="changeDate" > </el-date-picker> </template> <script lang="ts"> -import { Component, Emit, Vue } from "nuxt-property-decorator"; +import { Component, Emit, Prop, PropSync, Vue, Watch } from "nuxt-property-decorator"; @Component export default class UiDatePicker extends Vue { - dateValue = ''; + dateValue: Date | string = ''; + + @Prop() + defaultValue!: string; + + @Prop({default: false}) + isPastDateDisabled!: boolean; @Emit('changeDate') changeDate() { return this.dateValue; } + + @Watch('defaultValue', {immediate: true}) + updateDefault() { + if (this.defaultValue) { + this.dateValue = new Date(this.defaultValue); + this.changeDate(); + } + } + + get pickerOptions() { + if (this.isPastDateDisabled) { + return { + disabledDate(time: Date) { + const date = new Date(); + const currentDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`; + const pickedDate = `${time.getFullYear()}/${time.getMonth() + 1}/${time.getDate()}` + return new Date(pickedDate).getTime() < new Date(currentDate).getTime(); + } + } + } + } + } </script> \ No newline at end of file -- Gitblit v1.8.0