How to compare dates in Angular

It is a short tutorial on comparing two date objects in Angular with examples.

How do you create a Date object in Angular
How to compare two dates in Angular
Compare two dates without time in Angular

Let’s see the Date object how do you create it in

How do you create a Date object in Angular

The Date object creates in Angular like a Javascript object.

Date object can be created in the 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 creates a date object with a given day month and year

Empty Date constructor prints the current date. A date with a valid string creates a date with a given date.

Let’s declare an 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 the relational operator (===) In the same way, we can use the === operator to compare date 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,

function isDateEqual() which checks for date comparison
First, create a Date object in Angular using a new Date object for the current date. Directly Date object can not be compared, Instead, we have to use the Date.getTime function and === operator. Date.getTime() returns a long number of milliseconds since 01-01-1979 UTC.

Template component

<p>Date object Comparision</p>
{{isDateEqual()}} // true

We can also use other relational operators such as <= and >=

How to compare the given Date with the current Date in Angular

Suppose the Date object is coming from Database, You want to compare it with the current date.

Below is an angular example to compare the given date before or after of 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 to compare future Date with current Date in a template component

Sometimes, We want to compare the Current date with future dates,

Here is an angular component to compare future dates with the 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 the function to check truthy values

<div *ngIf="checkFutureDate()">Future Date passed</div>

compare dates using the MomentJS library in Angular

First, install the momentJS library using the npm command.

npm install moment --save

In the Angular component, import below moment objects

import * as a moment from 'moment';

In angular component code, You can use the moment object like a normal object Create a date object like this

date: moment.Moment = new moment("2020-06-01");

momentJS has isSame, isBefore, and isAfter functions to check future and past dates and equal

isSame: checks whether 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

Can you compare dates in angular?

Dates objects are compared like a number.

First Convert the string object into a Date object using the new Date(String) constructor
next, find the number of milliseconds using date.getTime(), returns EPOCH timestamp
Compare numbers of milliseconds using logical operators.
Returns true if equal, false if it is not satisfied

Conclusion

In this tutorial, you learned different examples for comparing two dates that are equal and comparing future and given dates with the current date.

How to compare dates in Angular | Momentjs example

#How do you create a Date object in Angular

#How to compare date objects for equal in Angular

#How to compare the given Date with the current Date in Angular

#How to compare future Date with current Date in a template component

#compare dates using the MomentJS library in Angular

#Can you compare dates in angular?

#Conclusion