Merge branch 'Phase3' of https://dev.pollex.com.tw:8443/r/pcalife/PAM into ...

Tomas

2022-01-24 73307b0ada907f8ac857b3dfc4e7d50e3b7b92e9

 PAMapp/components/Ui/UiDatePicker.vue

@@ -5,23 +5,31 @@
        v-model="dateValue"
        :clearable="false"
        type="date"
        :editable="false"
        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, Prop, Vue, Watch } 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;

    @Prop({default: false})
    isFutureDateDisabled!: boolean;

    @Emit('changeDate')
    changeDate() {
@@ -31,9 +39,33 @@
    @Watch('defaultValue', {immediate: true})
    updateDefault() {
        if (this.defaultValue) {
            this.dateValue = this.defaultValue;
            this.dateValue = new Date(this.defaultValue);
            this.changeDate();
        }
    }

    get pickerOptions() {
        const date = new Date();
        const currentDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;

        if (this.isPastDateDisabled) {
            return {
                disabledDate(time: Date) {
                    const pickedDate = `${time.getFullYear()}/${time.getMonth() + 1}/${time.getDate()}`;
                    return new Date(pickedDate).getTime() < new Date(currentDate).getTime();
                }
            }
        }

        if (this.isFutureDateDisabled) {
            return {
                disabledDate(time: Date) {
                    const pickedDate = `${time.getFullYear()}/${time.getMonth() + 1}/${time.getDate()}`;
                    return new Date(pickedDate).getTime() > new Date(currentDate).getTime();
                }
            }
        }
    }

}
</script>