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.

Solution 1

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.

Solution 2

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>

Solution 3

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

Solution 4

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

View more solutions