Merge branch 'pollex-dev' into sit

wayne

2022-01-26 6fa4bba623713c396432ba8b863846883d6a1906

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<template>
    <span>
        {{ displayValue }}
    </span>
</template>
 
<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
 
@Component
export default class UiDateFormat extends Vue {
    @Prop()
    date!: Date | string;
 
    @Prop()
    onlyShowSection!: 'YEAR' | 'DATE' | 'DAY' | 'TIME';
 
    compareTarget!: Date;
    displayValue = '';
 
    @Watch('date', {immediate: true})
    formattedDate(): void {
        if (!this.date) return;
 
        const toDatePromise = new Promise((resolve, reject) => {
            const date: Date = typeof(this.date) === 'string' ? new Date(this.date) : this.date as Date;
            resolve(date);
        });
 
        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}`;
                    } else if (this.onlyShowSection === 'DATE') {
                        this.displayValue = isThisYear(compareTarget)
                            ? thisYearDayLabel
                            : `${compareTarget.getMonth() + 1}/${compareTarget.getDate()}`;
                    } else if (this.onlyShowSection === 'YEAR') {
                        this.displayValue = `${compareTarget.getFullYear()}`;
                    }
 
                    if (this.onlyShowSection) return;
 
                    this.displayValue = isThisYear(compareTarget)
                        ? `${thisYearDayLabel} ${compareTarget.getHours()}:${minutes}`
                        : `${compareTarget.getFullYear()}/${compareTarget.getMonth() + 1}/${compareTarget.getDate()} ${compareTarget.getHours()}:${minutes}`;
                }
        )}
 
}
</script>