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.
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.
You don't need to use momentjs.
Update:
If you need to consider daylight saving time, don't use getTime, use Date.UTC instead:
calculateDiff(data){
let date = new Date(data.sent);
let currentDate = new Date();
let days = Math.floor((Date.UTC(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate()) - Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) ) /(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>
Previous Answer:
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>
Try like this:
.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;
}
<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;
}
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);
}
Please see this. You have to pass date calculateDiff(data.sent)
