Calculating the number of days between two dates with angular

Question

Calculating the number of days between two dates with angular

I need assistance with my application. I have an API response that includes a message sent date, and I am looking to calculate the difference in days between the current date and the date from the API response using Angular 8 along with map in ngFor.

Here is a link to my code on StackBlitz

Any help would be greatly appreciated. Should I consider using moment.js for this task?

javascript angular typescript date angular8

Answer 1

Answer №1

To solve this issue, you may simply insert plain code like the following:

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

Make sure to adjust your HTML in order to transmit the correct date information.

Here's an example for reference: https://stackblitz.com/edit/angular-bf5qer?file=src/app/app.component.ts

This code snippet was inspired by and might need some testing to ensure accuracy.

Answer 2

To solve this issue, you may simply insert plain code like the following:

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

Make sure to adjust your HTML in order to transmit the correct date information.

Here's an example for reference: https://stackblitz.com/edit/angular-bf5qer?file=src/app/app.component.ts

This code snippet was inspired by and might need some testing to ensure accuracy.

Answer 3

Answer №2

You can achieve the desired result without relying on momentjs.

Update:

If you want to take into account daylight saving time, avoid using getTime and opt for 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>

Answer 4

You can achieve the desired result without relying on momentjs.

Update:

If you want to take into account daylight saving time, avoid using getTime and opt for 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>

Answer 5

Answer №3

Here is a helpful example:

Live Demo

.html

<span style="color:red;">It has been {{calculateDaysAgo(data.date)}} days since it was sent</span>

.ts

calculateDaysAgo(sentDate) {
    var startDate:any = new Date(sentDate);
    var endDate:any = new Date();
    var differenceDays:any = Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24));

    return differenceDays;
}

Answer 6

Here is a helpful example:

Live Demo

.html

<span style="color:red;">It has been {{calculateDaysAgo(data.date)}} days since it was sent</span>

.ts

calculateDaysAgo(sentDate) {
    var startDate:any = new Date(sentDate);
    var endDate:any = new Date();
    var differenceDays:any = Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24));

    return differenceDays;
}

Answer 7

Answer №4

View the working demo here

<div style="font-weight:bold;">It has been {{calculateDiff(data.sent)}} days since this was sent</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 number of days between two dates
    let differenceInDays = Math.floor(differenceInTime / (1000 * 3600 * 24)); 
    return differenceInDays;
}

Answer 8

View the working demo here

<div style="font-weight:bold;">It has been {{calculateDiff(data.sent)}} days since this was sent</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 number of days between two dates
    let differenceInDays = Math.floor(differenceInTime / (1000 * 3600 * 24)); 
    return differenceInDays;
}

Answer 9

Answer №5

When working with your HTML, be sure to pass the dateString to the calculateDiff function.

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

In your TypeScript file, update your code as follows:

calculateDiff(date: string){
    let currentDate: Date = new Date();
    let previousDate = Date.parse(date); //time in milliseconds
    var timeDifference = currentDate.getTime() - previousDate;
    var differenceInDays = timeDifference / (1000 * 3600 * 24);
    return Math.floor(differenceInDays);
}

Answer 10

When working with your HTML, be sure to pass the dateString to the calculateDiff function.

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

In your TypeScript file, update your code as follows:

calculateDiff(date: string){
    let currentDate: Date = new Date();
    let previousDate = Date.parse(date); //time in milliseconds
    var timeDifference = currentDate.getTime() - previousDate;
    var differenceInDays = timeDifference / (1000 * 3600 * 24);
    return Math.floor(differenceInDays);
}

Answer 11

Answer №6

Check out this link for more information. Remember to input the date by using the function calculateDiff(data.sent)

Answer 12

Check out this link for more information. Remember to input the date by using the function calculateDiff(data.sent)

Calculating the number of days between two dates with angular

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

An issue occurred during rendering: `TypeError: Unable to retrieve the length property of an undefined value`

Managing asset paths post ng build: A guide

Difficulty encountered when choosing and interacting with website button with the utilization of Python 3.5.1 and Selenium 2.53.2

How do you trigger a function in a child component that was imported when a parent element is clicked?

Executing several asynchronous functions in Angular 2

Utilizing Javascript to retrieve the current Controller and Action in Rails

The feature to Select/DeSelect All does not function properly when dealing with individual records

Guide to implementing a Page Object Model for improved debugging of Protractor tests

Tips on extracting the ID number prior to locating an element by its ID using Python Selenium

Alert: Refs cannot be assigned to function components. Any attempt to access this ref will result in failure. Have you considered using React.forwardRef()? displayed in the @Mui Component

What is the best way to stop event bubbling in react-router-dom when using the <Link> component?

Assigning a value to a variable from a method in Vue: a step-by-step guide

Special function to handle ajax requests malfunctioning

Unlock real-time alerts with the power of JavaScript and PHP!

The callback function in jQuery does not function properly in a custom class or object

Having trouble with Vue.js not returning HTML elements from methods properly?

Prevent onlick actions until JavaScript function has completed

Adjust the tally of search results and modify the selection depending on the frequency of the user's searches within an array of objects

Utilizing multiple conditions in MongoDB is a great way to filter results when a specific key

Encountering an error message stating "Unable to access property 'injector' as null when attempting to downgrade Angular 2 service."