如何在到期前知道日期答案

【问题标题】：How to know date before it expire如何在到期前知道日期
【发布时间】：2020-03-13 12:52:04
【问题描述】：

我有一个关于从列表中知道到期日期的问题。在示例中，我有一些包含一些日期数据的列表。如果我有expireDate: 2019/11/20 那么我会在 7 天前注意到该日期吗？例如：

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

我真正想要的是我需要在 7 天之前通知 expireDate 一些 ngClass 属性等。有人可以给我建议吗？

【问题讨论】：

如果你的日期只是一个字符串，你需要把它解析成一个Date。然后，您可以对此日期对象进行日期计算。如果其中一个已包含在您的项目中，您还可以使用一些日期库（如 dateFns 或 moment）来解析和计算日期。使用库通常为相同的计算提供更简单的 API 语法。
是的，它有字符串日期。
以下是如何将 7 天添加到 JS Date：stackoverflow.com/a/5741780/3233827 以下是一些解析日期的方法：stackoverflow.com/questions/10430321/…
主要问题是解析日期，因为你在问题中描述的格式是非标准的。因此，您要么需要自己解析它，例如正则表达式或使用我之前评论中提到的日期库。
知道了我会试试的。

标签： javascript angular typescript

【解决方案1】：

这样用

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

在你的 html 文件中

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

stackblitz example

【讨论】：

【解决方案2】：

在类文件中

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

在模板文件中

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

在css文件中

.error {
    color: red
}

你可以根据自己的需要修改

【讨论】：