THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
This is an short tutorial on Compare two date objects in Angular with examples
- How do you create Date object in Angular
- How to compare two dates in Angular
- Compare two dates without time in Angular
Let’s see Date object how do you create in
How do you create Date object in Angular
Date object can be created in Angular like Javascript object
Date object can be created in Angular component as seen below
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
Let' declare angular component
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();
}
How to compare date objects for equal in Angular
In Angular, any object can be compared using relational operator (===)
The same way we can use === operator to compare objects.
Angular typescript component
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;
}
}
In Typescript, We have written function isDateEqual() which check for date comparison
First create an Date object in Angular using new Date object for current date
Directly Date object can not be compared, Instead we have to use Date.getTime function and === operator .
Template component
<p>Date object Comparision</p>
{{isDateEqual()}} // true
We can also use other relational operators
How to compare give Date with current Date in Angular
Suppose Date object is coming from Database, You want to compare with current date.
Below is angular example to compare given date is before or after of an current date.
We can use <,> !==,<=,>= relational operators for comparing dates.
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")
}
}
}
How compare future Date with current Date in template component
Sometimes, We want to compare Current date with future dates,
Here is an angular component to compare future dates with given date.
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;
}
}
}
In Template component
using *ngIf directive, We can use function to check truthy values
compare dates using MomentJS library in Angular
First install momentJS library using npm command
npm install moment --save
In Angular component, import below moment objects
import * as moment from 'moment';
In angular component code, You can use moment object like normal object
Create an date object like this
date: moment.Moment=new moment("2020-06-01");
MomentjS has isSame,isBefore, isAfter functions to check future and past dates and equal
isSame: checks two moment date objects are equal or not
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: One date is before another date
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: one date is after another date
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
Conclusion
In this tutorial, you learned different examples for comparing two dates are equal and compare future and given date with current date.
