Difference between two dates in Days using angular

Question

In my application I am getting message sent date from API response, I want to calculate the difference between current date and the date from API response in days(difference) using angular 8 and map in ngFor.

https://stackblitz.com/edit/angular-xv1twv?file=src%2Fapp%2Fapp.component.html

Please help me. Should I use moment.

moment js really simplifies anything to do with time and date. https://stackoverflow.com/questions/25150570/get-hours-difference-between-two-dates-in-moment-js — ButchMonkey, Nov 19 '19 at 09:41
Does this answer your question? [Javascript library for human-friendly relative date formatting](https://stackoverflow.com/questions/7641791/javascript-library-for-human-friendly-relative-date-formatting) — Ramesh, Nov 19 '19 at 09:43
moment would be an easy way to generate the friendly text https://momentjs.com/docs/#/durations/humanize/. Although I would wrap this functionality in to a filter. — phuzi, Nov 19 '19 at 09:43
Does this answer your question? [Angular 2 "time ago" pipe](https://stackoverflow.com/questions/36663148/angular-2-time-ago-pipe) — Joel Joseph, Nov 19 '19 at 09:48
https://stackoverflow.com/questions/3224834/get-difference-between-2-dates-in-javascript — Ininiv, Nov 19 '19 at 09:56
Working demo using `moment` https://angular-etkvgv.stackblitz.io — Sumit Ridhal, Nov 19 '19 at 10:07

score 24 · Accepted Answer · answered Nov 19 '19 at 09:48

If this is all you need you can add plain code. For example:

calculateDiff(dateSent){
    let currentDate = new Date();
    dateSent = new Date(dateSent);

    return Math.floor((Date.UTC(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate()) - Date.UTC(dateSent.getFullYear(), dateSent.getMonth(), dateSent.getDate()) ) /(1000 * 60 * 60 * 24));
}

You need to update your HTML to send the right date.

Example: https://stackblitz.com/edit/angular-bf5qer?file=src/app/app.component.ts

The code is adapted from https://www.w3resource.com/javascript-exercises/javascript-date-exercise-8.php and may require a few tests.

score 10 · Answer 2 · answered Nov 19 '19 at 09:47

You don't need to use momentjs.

  calculateDiff(data){
    let date = new Date(data.sent);
    let currentDate = new Date();

    let days = Math.floor((currentDate.getTime() - date.getTime()) / 1000 / 60 / 60 / 24);
    return days;
  }


<div *ngFor="let data of responseData" class="dataHolder">
  <div>{{data.title}}</div>
  <div>{{data.type}}</div>
  <div>{{data.msg}}</div>
   Message sent on: <div>{{data.sent}}</div>
   <div style="font-weight:bold;">sent {{calculateDiff(data)}}_ days ago</div>
</div>

score 3 · Answer 3 · answered Nov 19 '19 at 09:53

Working demo

  <div style="font-weight:bold;">sent {{calculateDiff(data.sent)}} days ago</div>

ts file:

 calculateDiff(sentOn){

            let todayDate = new Date();
            let sentOnDate = new Date(sentOn);
            sentOnDate.setDate(sentOnDate.getDate());
            let differenceInTime = todayDate.getTime() - sentOnDate.getTime();
            // To calculate the no. of days between two dates
            let differenceInDays = Math.floor(differenceInTime / (1000 * 3600 * 24)); 
            return differenceInDays;
      }

score 2 · Answer 4 · answered Nov 19 '19 at 09:51

Try like this:

Working Demo

.html

<div style="font-weight:bold;">sent {{calculateDiff(data.sent)}}_ days ago</div>

.ts

calculateDiff(sentDate) {
    var date1:any = new Date(sentDate);
    var date2:any = new Date();
    var diffDays:any = Math.floor((date2 - date1) / (1000 * 60 * 60 * 24));

    return diffDays;
}

score 0 · Answer 5 · answered Nov 19 '19 at 09:47

In your html, pass the dateString to the calculateDiff function

<div style="font-weight:bold;">sent {{calculateDiff(data.sent)}} days ago</div>

In your ts, change your code like this,

calculateDiff(date: string){
    let d2: Date = new Date();
    let d1 = Date.parse(date); //time in milliseconds
    var timeDiff = d2.getTime() - d1;
    var diff = timeDiff / (1000 * 3600 * 24);
    return Math.floor(diff);
}

score 0 · Answer 6 · edited Nov 19 '19 at 11:31

0

Please see this. You have to pass date calculateDiff(data.sent)

edited Nov 19 '19 at 11:31

RobC

22,977
20
73
80

answered Nov 19 '19 at 09:47

Sourav Golui

583
1
6
13

Difference between two dates in Days using angular

6 Answers6