使用管道将日期格式转换为具有三个选项的特定模型

Question

我正在寻找一种解决方案来更改论坛上显示日期的格式。我想显示在特定线程中写入的最后一个 post 的日期，如果 post 是今天或昨天写入的，我希望它显示“今天 12:33” 或“Yeasterday at 13:22” 在任何其他情况下我只想显示日期格式：“dd-MM-yyyy” 目前我的解决方案如下：

<div class="date-format">{{thread.createdAt | date:'dd-MM-yy' }}</div>

这是我得到的日期格式：

"createdAt": "2021-12-08T13:41:53.314223Z",

我想使用 angular 管道，但我真的不知道如何将它包含在这个文件中：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'dateTime'
})
export class DateTimePipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }

}

Answer 1

很简单（伪代码，你应该明白了）

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 完全取决于您支持的输入类型。
记得在你的模块中声明你的管道（可能还有导出）。

Answer 2

我现在无法测试，但你可以这样做：

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>

不要忘记在您的模块中声明（并在需要时导出）管道。

使用管道将日期格式转换为具有三个选项的特定模型

Transforming date format using pipe into specific model with three options

datetime

pipe

rxjs

typescript

angular