Display difference between two dates

Question

I am working on a project using Angular JS 8 and I am willing to simplify the work I am doing a little bit. Here is the deal:

I am retrieving data from the backend as follows:

[{
    "id": "1",
    "start_time": "2020-01-12T10:00:000Z",
    "end_time": "2020-01-12T12:00:000Z"
},
{
    "id": "2",
    "start_time": "2020-01-15T11:30:000Z",
    "end_time": "2020-01-15T14:00:000Z"
},
{
    "id": "3",
    "start_time": "2020-01-19T12:00:000Z",
    "end_time": "2020-01-19T18:40:000Z"
}]

I need to display the difference between end_time and start_time in a plain table, something like this:

id | start - end (time)
1  |  2 hours and 00 min
2  |  2 hours and 30 min
3  |  6 hours and 40 min

I am using moment.js in my controller to calculate the difference between these two dates but I am wondering if there is a better way to do it directly in the HTML, instead of iterating the retrieved data and performing this operation.

Does this answer your question? [Difference between two dates in minute, hours javascript](https://stackoverflow.com/questions/20839874/difference-between-two-dates-in-minute-hours-javascript) — palaѕн, May 11 '20 at 17:18
I don't think so, I'd like to find a way to do it easily with HTML only. — Rene Enriquez, May 11 '20 at 17:19
You would be able to do this with a Pipe (see [docs about pipes](https://angular.io/guide/pipes)). I'm fairly certain you won't find a HTML only solution. — Cicero, May 11 '20 at 17:28
I was thinking about that. Do you think I can chain existing pipes or should I create a customized one? — Rene Enriquez, May 11 '20 at 17:35
you can create new pipe but use the angular date pipe in your pipe — Ashot Aleqsanyan, May 11 '20 at 17:40
You can't this with "HTML Only". Not possible. The closest you'll get is to leverage an angular Pipe. — mwilson, May 11 '20 at 17:59
Btw, AngularJS and Angular are two different things. AngularJS is the old tech with versions 1.x. Angular is written in typescript and is structured in a very different way. — ShamPooSham, May 11 '20 at 18:16
To be clear, you want to do this in the Angular 8 HTML **template**. I'd say such a solution would be much harder than doing it in the component class logic, so I don't know why you would want to do that — ShamPooSham, May 11 '20 at 18:18

score 1 · Accepted Answer · answered May 11 '20 at 19:04

OK, I finally ended up creating a custom pipe which looks like this:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'substractDate'
})
export class SubstractDatePipe implements PipeTransform {

  transform(fromDate: Date, substractDate: Date): string {
    const difference = fromDate.valueOf() - substractDate.valueOf();

    const minutes = Math.floor((difference / (1000 * 60)) % 60);
    const hours = Math.floor(difference / (1000 * 60 * 60) % 24);

    return `${this.formatTime(hours)}:${this.formatTime(minutes)}`;
  }

  formatTime(time: number): string {
    const formattedTime = (time < 10) ? '0' + time : time.toString();
    return formattedTime;
  }

}

Display difference between two dates

1 Answers1