我正在尋找一種解決方案來更改論壇上顯示的日期格式。我想顯示在特定執行緒中寫的最后一個帖子的日期,如果帖子是今天或昨天寫的,我希望它顯示“今天 12:33”或“昨天 13:22”如果我只想顯示日期格式:“dd-MM-yyyy” 目前我的解決方案如下:
<div class="date-format">{{thread.createdAt | date:'dd-MM-yy' }}</div>
這是我得到的日期格式:
"createdAt": "2021-12-08T13:41:53.314223Z",
我想使用角形管道,但我真的不知道如何將它包含在這個檔案中:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'dateTime'
})
export class DateTimePipe implements PipeTransform {
transform(value: unknown, ...args: unknown[]): unknown {
return null;
}
}
uj5u.com熱心網友回復:
我現在無法測驗它,但是您可以執行以下操作:
import { Pipe, PipeTransform } from '@angular/core';
import { formatDate } from '@angular/common';
@Pipe({
name: 'myDateTime'
})
export class MyDateTimePipe implements PipeTransform {
transform(value: string): string {
if (!value || value =='') {
return '';
}
const todayDate : Date = new Date();
const htmlDate : Date = new Date(value);
date1 = formatDate(todayDate,'dd-MM-yy','en_US');
date2 = formatDate(htmlDate,'dd-MM-yy','en_US');
if( date1 = date2 ) {
return `Today at ${htmlDate.getHours()}:${htmlDate.getMinutes()}`;
}
return getFormattedDate(value);
}
}
getFormattedDate(date: string): string {
if (!date) {
return '';
}
const dateObj = new Date(date);
if (isNaN(dateObj.getTime())) {
return '';
} else {
return formatDate(dateObj, 'dd-MM-yy', 'en');
}
}
在 HTML 中測驗它:
<div class="date-format">{{thread.createdAt | myDateTime }}</div>
不要忘記在模塊中宣告(并在需要時匯出)管道。
uj5u.com熱心網友回復:
它非常簡單(偽代碼,你應該明白了)
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'smartDate'
})
export class DateTimePipe implements PipeTransform {
transform(inputTimestamp: any, ...args: unknown[]): unknown {
const timeDelta= Date.now() - inputTimestamp //calculate time difference
if(timeDelta< 24 hours){
return `Today at ${formay your date}`
}eles if(timeDelta < 48 hours){
return `Yesterday at ${format your date again}`
}
return "Format your date for whatever else case "
}
}
接著
<div class="date-format">{{thread.createdAt | smartDate }}</div>
評論:
inputTimestamp是你傳遞給管道的任何東西。在我們的例子中,它的值為thread.createdAt- 最好不要使用
any型別,而是使用具體的型別,也許Date這一切都取決于您支持的輸入型別。 - 請記住在您的模塊中宣告您的管道(也可能匯出)。
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/382553.html
上一篇:在熊貓中拆分24小時資料
