I'm looking for a solution to change the format of the displayed date on the forum. I would like to display the date of the last post written in the specific thread, and if the post was written today or yesterday I would like it to show "Today at 12:33" or "Yeasterday at 13:22" in any other case I would like to display only the date format: "dd-MM-yyyy " Currently my solution is as follows:

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

And here is the format of the date i get:

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

I'd like to use angular pipes, but I don't really know how to include it in this file:

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

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

}

CodePudding user response：

Its very simple (pseudocode, you should get the idea)

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 "
  }

}

and then

<div >{{thread.createdAt | smartDate }}</div>

Remarks:

1. inputTimestamp is whatever you have passed to the pipe. In our example it will be value of thread.createdAt
2. It would be nice to NOT to use any type but a concrete one, maybe Date all depends on your supported input type.
3. Remember to declare your pipe (and probably export as well) in your module.

CodePudding user response：

I can test it, but you can do something like this:

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');
    }
}

To test it in the HTML:

<div >{{thread.createdAt | myDateTime }}</div>

Don't forget to declare (and export if it's needed) the pipe in your module.