From 95d0e5524c3ab1e55a9909e2c38e7cc35901220f Mon Sep 17 00:00:00 2001
From: 劉鈞霖 <benson@gmail.com>
Date: 星期三, 15 十二月 2021 14:52:58 +0800
Subject: [PATCH] [ Update ] ：新增 pamService class 將 consultant interface 移出
---
PAMapp/components/Ui/UiDateFormat.vue | 65 ++++++++++++++++++++------------
1 files changed, 41 insertions(+), 24 deletions(-)
diff --git a/PAMapp/components/Ui/UiDateFormat.vue b/PAMapp/components/Ui/UiDateFormat.vue
index eae9ce9..7decbf2 100644
--- a/PAMapp/components/Ui/UiDateFormat.vue
+++ b/PAMapp/components/Ui/UiDateFormat.vue
@@ -1,40 +1,57 @@
<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 {
- @Prop() date!: Date;
+ @Prop() date!: Date | string;
@Prop() onlyShowSection!: 'DAY' | 'TIME';
+ compareTarget!: Date;
- get formattedDate(): string {
- const isToday = (compareDate: Date): boolean => {
- return compareDate.getFullYear() === _now.getFullYear()
- && compareDate.getMonth() === _now.getMonth()
- && compareDate.getDate() === _now.getDate()
- };
+ displayValue = '';
- 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()}`;
+ @Watch('date', {immediate: true}) formattedDate(): void {
- 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}`;
- }
+ if (!this.date) return;
- return isThisYear(this.date)
- ? `${thisYearDayLabel} ${this.date.getHours()}:${minutes}`
- : `${this.date.getFullYear()}/${this.date.getMonth() + 1}/${this.date.getDate()} ${this.date.getHours()}:${minutes}`;
- }
+ 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}`;
+ }
+
+ if (this.onlyShowSection) return;
+
+ this.displayValue = isThisYear(compareTarget)
+ ? `${thisYearDayLabel} ${compareTarget.getHours()}:${minutes}`
+ : `${compareTarget.getFullYear()}/${compareTarget.getMonth() + 1}/${compareTarget.getDate()} ${compareTarget.getHours()}:${minutes}`;
+ }
+ )}
+
}
</script>
\ No newline at end of file
--
Gitblit v1.8.0