这是一个关于在Angular中比较两个日期对象的简短教程，并附有实例。
- 如何在Angular中创建一个日期对象
- 如何在Angular中比较两个日期
- 在Angular中比较两个没有时间的日期
让我们看看Date对象是如何在Angular中创建的。
如何在Angular中创建一个Date对象
Date对象在Angular中的创建和Javascript对象一样。
日期对象可以在Angular组件中创建，如下所示。
currentDate: Date = new Date(); // This creates an date object with current date
date1: Date = new Date('01.01.2020'); // This creats an date object with given day month and year
让我们声明Angular组件
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-datecompare',
templateUrl: './datecompare.component.html',
styleUrls: ['./datecompare.component.css']
})
export class DatecompareComponent implements OnInit {
date1: Date = new Date('01.01.2020');
currentDate: Date = new Date();
}
如何在Angular中比较日期对象是否相等
在Angular中，任何对象都可以使用关系运算符（=== ）进行比较。同样，我们可以使用===运算符来比较对象。
Angular typescript组件
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-datecompare',
templateUrl: './datecompare.component.html',
styleUrls: ['./datecompare.component.css']
})
export class DatecompareComponent implements OnInit {
date1: Date = new Date();
date2: Date = new Date();
constructor() { }
ngOnInit(): void {
}
isDateEqual() {
if (this.date1.getTime() === this.date2.getTime())
return true;
return false;
}
}
在Typescript中，我们已经编写了检查日期比较的函数isDateEqual() 。
首先，在Angular中使用一个新的Date对象来创建当前日期。直接Date 对象不能进行比较，相反，我们必须使用Date.getTime 函数和=== 操作符。
模板组件
<p>Date object Comparision</p>
{{isDateEqual()}} // true
我们还可以使用其他的关系运算符。
如何在Angular中比较给定日期和当前日期
假设日期对象来自数据库，你想将其与当前日期进行比较。
下面是一个Angular的例子，比较给定日期是在当前日期之前还是之后。
我们可以使用<,> !==,<=,>=关系运算符来比较日期。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-datecompare',
templateUrl: './datecompare.component.html',
styleUrls: ['./datecompare.component.css']
})
export class DateComponent implements OnInit {
date1: Date = new Date('01.01.2020');
currentDate: Date = new Date();
constructor() { }
ngOnInit(): void {
}
compareDates(){
if(this.date1.getTime()<this.currentDate.getTime()){
console.log("date1 is before current date")
}
if(this.date1.getTime()>this.currentDate.getTime()){
console.log("date1 is after current date")
}
}
}
如何在一个模板组件中比较未来日期和当前日期
有时，我们想比较当前日期和未来日期。
这里有一个Angular组件来比较未来日期和给定日期。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-datecompare',
templateUrl: './datecompare.component.html',
styleUrls: ['./datecompare.component.css']
})
export class DateComponent implements OnInit {
futureDate: Date = new Date('01.01.2022');
currentDate: Date = new Date();
constructor() { }
ngOnInit(): void {
}
checkFutureDate(){
if(this.futureDate.getTime()>this.currentDate.getTime()){
console.log("date1 is before current date");
return true;
}
}
}
在模板组件中使用*ngIf directive ，我们可以使用函数来检查真实的值
在Angular中使用MomentJS库比较日期
首先，使用npm命令安装momentJS库。
npm install moment --save
在Angular组件中，导入以下moment 对象
import * as a moment from 'moment';
在Angular组件代码中，你可以像使用普通对象一样使用moment 对象 像这样创建一个日期对象
date: moment.Moment=new moment("2020-06-01");
momentJS有isSame,isBefore,isAfter函数来检查未来和过去的日期，以及等于
isSame: 检查两个时刻的日期对象是否相等
moment('2021-02-12').isSame('2021-02-12'); // true
moment('2021-02-12').isSame('2021-02-15'); // false
moment('2021-02-12').isSame('2021-02-10'); // false
isBefore:一个日期在另一个日期之前
moment('2021-02-12').isBefore('2021-02-12'); // false
moment('2021-02-12').isBefore('2021-02-15'); // true
moment('2021-02-12').isBefore('2021-02-10'); // false
isAfter: 一个日期在另一个日期之后
moment('2021-02-12').isAfter('2021-02-12'); // false
moment('2021-02-12').isAfter('2021-02-15'); // false
moment('2021-02-12').isAfter('2021-02-10'); // true
总结
在本教程中，你学到了比较两个日期是否相等以及比较未来和给定日期与当前日期的不同例子。
