How to know date before it expire

Question

I have a question with knowing expiring date from the list. In example i have a few list that contains some date data. What if i have expireDate: 2019/11/20 then i will notice that date from 7 days before ? In example:

<tbody>
   <tr *ngFor="let organization of organizations" (click)="openModal('companyDetail', organization.id)">
      <td>{{ organization.code }}</td>
      <td>{{ organization.title }}</td>
      <td>{{ organization.contract.condition }}</td>
      <td>{{ organization.contract.createdDate }}</td>
      <td>{{ organization.contract.period }}</td>
      <td>{{ organization.contract.expireDate }}</td>
      <td>{{ organization.contract.conditionType }}</td>
      <td>{{ organization.address }}</td>
      <td>{{ organization.address }}</td>
      <td>
          <div class="button_group">
            <button class="text-primary" (click)="updateOrganization($event, organization.id);">
               <i class="fa fa-edit"></i>
            </button>
            <button class="text-danger">
               <i class="fa fa-times-circle-o"></i>
            </button>
          </div>
      </td>
   </tr>
</tbody>

What i exactly want is i need to notify expireDate before 7 day with some ngClass attribute etc. Can someone give me advice ?

If your date is just a string, you need to parse it into a `Date`. Then, you can do date calculations on this date object. You could also use some date library like `dateFns` or `moment` to parse and calculate the date if one of these is already included in your project. Using a library usually provides an easier API syntax for the same calculations. — ssc-hrep3, Nov 18 '19 at 07:28
Here is how you can add 7 days to a JS `Date`: https://stackoverflow.com/a/5741780/3233827 And here are some approaches to parse the date: https://stackoverflow.com/questions/10430321/how-to-parse-a-dd-mm-yyyy-or-dd-mm-yyyy-or-dd-mmm-yyyy-formatted-date-stri — ssc-hrep3, Nov 18 '19 at 07:31
The main problem is to parse the date, because the format you describe in the question is non-standard. So, you either need to parse it by yourself with e.g. regex or use a date library like mentioned in my previous comment. — ssc-hrep3, Nov 18 '19 at 07:35

Saurabh Yadav · Answer 1 · 2019-11-18T08:11:40.553

in class file

 getDateDiff() {
        let todayDate = new Date();
        //let expiredDate = new Date();
        //expiredDate.setDate(expiredDate.getDate() + 7);
        let expiredDate = new Date('2019/11/25');
        expiredDate.setDate(expiredDate.getDate());
        let differenceInTime = expiredDate.getTime() - todayDate.getTime(); 
        // To calculate the no. of days between two dates
        let differenceInDays = differenceInTime / (1000 * 3600 * 24); 
        return differenceInDays;
    }

in template file

<td [ngClass]="{'error': getDateDiff() <  7}"> {{ organization.contract.expireDate }}</td>

in css file

.error {
    color: red
}

you can modify it according to your need

score 1 · Accepted Answer · answered Nov 18 '19 at 08:47

Use this way

import { Component } from '@angular/core';
import moment from 'moment'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  datesArray = ['2019-11-25', '2019-11-23', '2022-12-12','2018-12-12','2032-12-12', '2042-12-12'];

  getColor(date){
    console.log(new Date(date));
    console.log(moment().day(7).toDate());

    if( new Date(date) < moment().day(7).toDate()){
      return 'red';
    }
  }
}

In your html file

<div [ngStyle]="{'color':getColor(date)}">{{ date }}</div>

stackblitz example

How to know date before it expire

2 Answers2