How to compare dates in Angular | Momentjs example


This is an short tutorial on Compare two date objects in Angular

  • 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 defined 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();


}

Compare two date objects are equal or not 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 comparision

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

Angular compare Date 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

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

MomentJS in Angular compare dates

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

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

Angular Material list | Best mat-list and item examples

Fix for Property has no initializer and is not definitely assigned in the constructor

How to convert json to/from  object in angular|Typescript 

Angular ngFor index - How to get current last even and odd index?

How to convert number to words in Angular|Typescript example

How to Format array of dates in typescript Angular example

In this post, you learn writing comments in Angular and typescript. You can also write single multiline and documentation comments in Typescript. This includes declare comments in Angular typescript and template HTML components.