<template>
|
<span>
|
{{ formattedDate }}
|
</span>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Prop } from 'vue-property-decorator';
|
|
@Component
|
export default class UiDateFormat extends Vue {
|
@Prop() date!: Date;
|
@Prop() onlyShowSection!: 'DAY' | 'TIME';
|
|
get formattedDate(): string {
|
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 _now = new Date();
|
const minutes = _now.getMinutes() > 9 ? _now.getMinutes() : `0${_now.getMinutes()}`;
|
const thisYearDayLabel = isToday(this.date) ? `今天` : `${this.date.getMonth() + 1}/${this.date.getDate()}`;
|
|
if (this.onlyShowSection === 'DAY') {
|
return isThisYear(this.date) ? thisYearDayLabel : `${this.date.getFullYear()}/${this.date.getMonth() + 1}/${this.date.getDate()}`;
|
} else if (this.onlyShowSection === 'TIME') {
|
return `${this.date.getHours()}:${minutes}`;
|
}
|
|
return isThisYear(this.date)
|
? `${thisYearDayLabel} ${this.date.getHours()}:${minutes}`
|
: `${this.date.getFullYear()}/${this.date.getMonth() + 1}/${this.date.getDate()} ${this.date.getHours()}:${minutes}`;
|
}
|
}
|
</script>
|
