fixed: UiDateFormat - always return now date error

HelenHuang

2021-12-06 fe5c7d36a062e483c64a39dd1da1d90d29f2ff53

fixed: UiDateFormat - always return now date error

 PAMapp/components/Ui/UiDateFormat.vue

@@ -1,11 +1,11 @@
<template>
    <span>
        {{ formattedDate }}
        {{ displayValue }}
    </span>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';

@Component
export default class UiDateFormat extends Vue {
@@ -13,35 +13,45 @@
    @Prop() onlyShowSection!: 'DAY' | 'TIME';
    compareTarget!: Date;

    get formattedDate(): string {
    displayValue = '';

        if (typeof this.date === 'string') {
            this.compareTarget = new Date(this.date);
        } else {
            this.compareTarget = this.date;
        }
        const isToday = (compareDate: Date): boolean => {
            return compareDate.getFullYear() === _now.getFullYear()
                && compareDate.getMonth() === _now.getMonth()
                && compareDate.getDate() === _now.getDate()
        };
    @Watch('date', {immediate: true}) formattedDate(): void {

        const isThisYear = (compareDate: Date): boolean => {
            return compareDate.getFullYear() === _now.getFullYear();
        };
        const _now = new Date();
        const minutes = _now.getMinutes() > 9 ?  _now.getMinutes() : `0${_now.getMinutes()}`;
        const thisYearDayLabel = isToday(this.compareTarget) ? `今天` : `${this.compareTarget.getMonth() + 1}/${this.compareTarget.getDate()}`;
        if (!this.date) return;

        if (this.onlyShowSection === 'DAY') {
            return isThisYear(this.compareTarget) ? thisYearDayLabel : `${this.compareTarget.getFullYear()}/${this.compareTarget.getMonth() + 1}/${this.compareTarget.getDate()}`;
        } else if (this.onlyShowSection === 'TIME') {
            return `${this.compareTarget.getHours()}:${minutes}`;
        }
        const toDatePromise = new Promise((resolve, reject) => {
            const date: Date = typeof(this.date) === 'string' ? new Date(this.date) : this.date;
            resolve(date);
        });

        return isThisYear(this.compareTarget) 
            ? `${thisYearDayLabel} ${this.compareTarget.getHours()}:${minutes}` 
            : `${this.compareTarget.getFullYear()}/${this.compareTarget.getMonth() + 1}/${this.compareTarget.getDate()} ${this.compareTarget.getHours()}:${minutes}`;
    }    
        toDatePromise.then((compareTarget: any) => {
            const _now = new Date();
                    const isToday = (compareDate: Date): boolean => {
                        return compareDate.getFullYear() === _now.getFullYear()
                            && compareDate.getMonth() === _now.getMonth()
                            && compareDate.getDate() === _now.getDate()
                    };

                    const isThisYear = (compareDate: Date): boolean => {
                        return compareDate.getFullYear() === _now.getFullYear();
                    };
            
                    const minutes = compareTarget.getMinutes() > 9 ?  compareTarget.getMinutes() : `0${compareTarget.getMinutes()}`;
                    const thisYearDayLabel = isToday(compareTarget) ? `今天` : `${compareTarget.getMonth() + 1}/${compareTarget.getDate()}`;

                    if (this.onlyShowSection === 'DAY') {
                        this.displayValue = isThisYear(compareTarget) ? thisYearDayLabel : `${compareTarget.getFullYear()}/${compareTarget.getMonth() + 1}/${compareTarget.getDate()}`;
                    } else if (this.onlyShowSection === 'TIME') {
                        this.displayValue = `${compareTarget.getHours()}:${minutes}`;
                    }

                    if (this.onlyShowSection) return;

                    this.displayValue = isThisYear(compareTarget) 
                        ? `${thisYearDayLabel} ${compareTarget.getHours()}:${minutes}` 
                        : `${compareTarget.getFullYear()}/${compareTarget.getMonth() + 1}/${compareTarget.getDate()} ${compareTarget.getHours()}:${minutes}`;
                }    
        )}

}
</script>