Question

我正在构建一个从数据库获取文章的应用程序，其中一个字段是现在的日期，格式为“ 2019-06-13T18：03：58.000Z” 基本上我需要做的是检查这是否是今天的日期，返回小时和上午/下午，因此对于本示例来说是今天，因此返回18:03 pm，如果日期与昨天相同，则返回“昨天”，如果日期以外的其他日期，然后返回“月，日”

我尝试创建Date对象，然后进行比较，但这没有用

我有html的这段代码：

<div class='date-container'>
        {{renderDate(data.created_at)}}
    </div>

，并在component.ts文件中：

public renderDate(date) {
    const fecha = new Date(date);
    const today = new Date();
    const yesterday = today.getDate()-1;
    let fecha_r = '';

    if(fecha.getTime() == today.getTime()){
      fecha_r = 'today';
    }

    return fecha_r;
  }

我需要在该函数中返回转换后的日期，以便我的html代码打印正确格式的日期，我该怎么做？

Answer 1

我建议您为日期值输出使用custom pipe。 Angular无法缓存函数结果，因此在每个更改检测周期都会调用它们。仅当输入值更改时才调用管道。我认为类似的方法可以解决问题：

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';
@Pipe({name: 'customDatePipe'})
export class CustomDatePipe implements PipeTransform {
  transform(value: Date): string {
    const datePipe = new DatePipe('en-US');
    const today = new Date();
    if (today.getDate() === value.getDate() && today.getMonth() === value.getMonth() && today.getFullYear() === value.getFullYear()) {
      return datePipe.transform(value, 'hh:mmaa');
    } else {
      return datePipe.transform(value, 'MMM, d');
    }
  }
}

这是利用内置的Date Pipe进行最终的字符串转换。您只需要在模块的声明中添加管道，然后就可以像{{ data.createdAt | customDatePipe}}一样使用它。

Answer 2

您可以在组件中使用有角的DatePipe并根据Date比较的结果返回转换后的Date格式。

组件：

constructor(datePipe: DatePipe) {}

date = new Date();

//returns formatted date based on date comparison  
formatDay(date): string{
  let today = new Date()
  let yesterday = ( d => new Date(d.setDate(d.getDate()-1)) )(new Date);

  if(this.isSameDate(today, date))        
    return this.datePipe.transform(date,'hh:mm a');
  else if (this.isSameDate(yesterday, date))
    return 'Yesterday'
  else                                       
    return this.datePipe.transform(date,'MMMM d');
 }
//checks if two dates are identical
isSameDate(d1, d2){
   return d1.getDate() === d2.getDate() && d1.getMonth() === d2.getMonth() && d1.getFullYear() === d2.getFullYear();
}

模板：

{{formatDay(date)}}

您只需要在组件中import { DatePipe } from '@angular/common';，然后在模块中添加DatePipe：（如果您没有用于此组件的模块，则为app.module.ts

 providers: [DatePipe]

这是其中的Stackblitz

Answer 3

您可以使用toDateString检查今天的日期，并使用formatAMPM函数显示hh：mm AM今天的日期

public renderDate(date) {
    const fecha = new Date(date);
    const today = new Date();
    const yesterday = today.getDate() - 1;
    let fecha_r = '';

    if (fecha.toDateString() == today.toDateString()) {
      fecha_r = this.formatAMPM(today);
    }

    return fecha_r;
  }

  formatAMPM(date) {
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var ampm = hours >= 12 ? 'pm' : 'am';
    hours = hours % 12;
    hours = hours ? hours : 12; // the hour '0' should be '12'
    minutes = minutes < 10 ? '0' + minutes : minutes;
    var strTime = hours + ':' + minutes + ' ' + ampm;
    return strTime;
  }

演示https://play.golang.org/p/Pmmv00spcI6

Answer 4

我们无法使用date.getTime()准确地比较两个日期，因为除非这两个日期的毫秒数相同，否则它将始终返回false。 date.getTime()返回以MS为单位的日期值。

我们可以创建自己的帮助器方法来确定两个日期是否在同一天，然后在renderDate（）中，我们可以调整返回值的逻辑：

public renderDate(date){

    const fecha = new Date(date);

    if(sameDay(new Date(), fecha){                // if is today

        return fecha.getHours() + ":" + fecha.getMinutes();

    } else if (sameDay(new Date()-1, fecha) {     // if is yesterday

        return "yesterday";

    } else {                                      //is neither

        return fecha.getMonth() + "," + fecha.getDate();

    }
}


public boolean sameDay(d1, d2) {
    return d1.getDate() === d2.getDate() && d1.getMonth() === d2.getMonth() && d1.getFullYear() === d2.getFullYear()
}

是的，有很多库和其他方法可以做到这一点，但这是“手工”完成的一种方法。

有没有办法用小时代替今天？

4 个答案: