How to calculate total days between now and a declared day in Angular?

Question

Hello I would like to compare a day with the current date and get the total days.

If the total day is greater than 50 than set "fiffty".

I think the last part is easy but i cant get the solution for get the total days and compare them.

is there a function like this?

<td><div *ngIf="todo.anyDate>-dateNow()>50">fiffty</div> </td>

Thanks for helping

I would use momentjs https://stackoverflow.com/questions/9129928/javascript-how-to-calculate-number-of-days-between-two-dates-using-javascript — andrea06590, Jan 08 '18 at 21:20

score 1 · Answer 1 · answered Jan 08 '18 at 21:46

Without using momentjs, you would have to define a function in your component:

public inBetween(date1, date2 ) {
  //Get 1 day in milliseconds
  var one_day=1000*60*60*24;

  // Convert both dates to milliseconds
  var date1_ms = date1.getTime();
  var date2_ms = date2.getTime();

  // Calculate the difference in milliseconds
  var difference_ms = date2_ms - date1_ms;

  // Convert back to days and return
  return Math.round(difference_ms/one_day); 
}

Source

Then, in your *ngIf you would do inBetween(anyDate, new Date())

KavehG · Answer 2 · 2018-01-08T22:00:12.733

You should define a function in your component class:

getDiferenceInDays(theDate : Date) : number {
    return Math.abs(date.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24) ;
}

and then use that in your template:

<td>
    <div *ngIf="getDiferenceInDays(todo.anyDate) > 50">fiffty</div>
</td>

Note that use can't use new in template expressions so you'll have to move your new Date() to the function part!

Ringo · Answer 3 · 2018-01-09T05:27:55.243

Sounds like a job for Pipe! Like Andrea said, you can take advantage of momentJS. It is pretty awesome.

I wrote a simple pipe function that will return the difference between 2 date.

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

@Pipe({
  name: 'datediff'
})
export class DatediffPipe implements PipeTransform {

  transform(date1: any, date2?: any): any {
    const daydiff = moment(date1).diff(moment(date2), "days");
    return Math.abs(daydiff);
  }
}

example:

https://stackblitz.com/edit/angular-qepdnc

UPDATE:

Alternatively, if you need to keep track of the number of date that exceed 50 in your app, Pipe may not be the best tool for the job, as you will need to store state in your local component.

A possible solution reusing the same function as a method within the component class.

https://stackblitz.com/edit/angular-73xvto

  this.result = this.sampleData.map(date => { 
    const diff = this.dateDiff(date, this.today);
    return {
      date,
      diff
    }
  });

this.resultDiffCount = this.result.filter(r => r.diff > 50).length;

Wow thank you very much! That was a very fast answer. Ok. I had it. Is there just a solution to count this "fiffty" and take it to a alert box? There are {{count(fiffty)}} fiftys . — BVB1392, Jan 08 '18 at 23:10
hmm you want to count the number of result that exceed 50? If thats the case, then pipe may not be your best solution, its best to use it for pure function logic without persisting state. I would consider taking your date data, put them into a collection, and loop thru them. example, you can take the above function and map it against your collection of date pair. i updated my answer from above. — Ringo, Jan 09 '18 at 04:58

score 0 · Answer 4 · answered Jan 08 '18 at 22:40

Yes there is, using *ng-if directive, you can create a method that does your calculation example dateDiff in your component, then call it in your html like this:

<div *ng-if="dateDiff(todo.anyDate) > 50">fiffty</div>

Please check it in this demo:

function AppComponent() {
  this.todo = {};
  this.todo.anyDate = new Date('2018-01-08');

  this.dateDiff = function(date) {
    console.log(new Date() - this.todo.anyDate);
    return new Date() - this.todo.anyDate;
  }

}

AppComponent.annotations = [
  new angular.ComponentAnnotation({
    selector: 'my-app'
  }),
  new angular.ViewAnnotation({
    template: '<div *ng-if="dateDiff(todo.anyDate) > 50">fiffty</div>',
    directives: [angular.NgFor, angular.NgIf]
  })
];

document.addEventListener('DOMContentLoaded', function() {
  angular.bootstrap(AppComponent);
});

<script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.sfx.dev.js"></script>
<my-app>
</my-app>

How to calculate total days between now and a declared day in Angular?

4 Answers4