Есть ли способ заменить сегодняшнюю дату часами?

Question

Я создаю это приложение, которое получает статьи из БД, и 1 из полей - это дата, которая сейчас находится в формате '2019-06-13T18: 03: 58.000Z', и в основном мне нужно проверитьесли это сегодняшняя дата, верните только часы и am / pm, так что для этого примера сегодня, поэтому верните 18:03 pm, если дата совпадает со вчерашней, тогда верните вчера и, если дата отличается от тех, то верните 'Month, день '

Я пытался создать объекты 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

Вы можете использовать угловой DatePipe в вашем компоненте и возвращать преобразованный формат даты в зависимости от результата сравнения дат.

Компонент:

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 2

Я бы рекомендовал использовать пользовательский канал для вывода значения даты.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 3

Вы можете использовать toDateString для проверки текущей даты и функцию formatAMPM для отображения чч: мм 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://stackblitz.com/edit/angular-format-today-date?file=src/app/app.component.html

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()
}

да, есть библиотеки и другие способы сделать это, но это один из способов сделать это "вручную".