CODEWITHSUNDEEP
angularangular2-templateangular-ng-if
BVB1392
BVB1392

Reputation: 187

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

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

Upvotes: 3

Views: 11172

Answers (4)

Ringo
Ringo

Reputation: 621

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;

Upvotes: 0

hd84335
hd84335

Reputation: 9913

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>

Upvotes: 0

KavehG
KavehG

Reputation: 323

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!

Upvotes: 1

Boland
Boland

Reputation: 1571

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())

Upvotes: 1

Related Questions