Comparision of Dates( input type="date" and Date datatype )

In my current work, I am handling the dates and times. So, I am learning a lot about date and time in angular and ionic. In my project, I have to generate dates between a range. 

And I was comparing an input date with generated date, and found that the comparison was never true. Here I have created the same scenario to make you understand the problem I had faced.

Below is the code with issue:

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Date Generation
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Date Generation</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-input  type="date" [(ngModel)]="inputDate"></ion-input>
  <ion-button (click)="dateComparison()">Date Comparision</ion-button>
  {{comparisonResult}}
</ion-content>

 

home.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  inputDate: Date;
  comparisonResult: string;
  today: Date= new Date();
  constructor() {}

  dateComparison(){
    if(this.inputDate===this.today){
      this.comparisonResult="Both dates are current date";
    }
    else if(this.inputDate<this.today){
      this.comparisonResult="Input date is the past date";
    }
    else if(this.inputDate> this.today){
      this.comparisonResult="Input Date is the future date";
    }
    else{
      this.comparisonResult="Both dates are incomparable";
    }

  }

}

The output of the Code:

Explanation: According to my assumption two dates are declared as Date, So they will be equal or unequal. But this is not that simple for Angular. Let's see why this comparison is always returning false.

So I added two lines to know the values of both the dates to  the HTML page

  <p>{{inputDate}}</p>  
   <p>{{today}}</p> 

 

Output: Here you can see the input date has different format from the date generated from " new Date() "

So This is the reason both dates were not comparable.

Fix: To fix this problem. the input value needs to initialized from "new Date()",

home.page.html

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  inputDate: Date;
  comparisonResult: string;
  today: Date= new Date();
  constructor() {}

  dateComparison(){
    var newInputDateL:Date= new Date(this.inputDate)
    if(newInputDateL===this.today){
      this.comparisonResult="Both dates are current date";
    }
    else if(newInputDateL<this.today){
      this.comparisonResult="Input date is the past date";
    }
    else if(newInputDateL> this.today){
      this.comparisonResult="Input Date is the future date";
    }
    else{
      this.comparisonResult="Both dates are incomparable";
    }

  }

}

 

So now the comparison can be done.

Thank you, Hope this is helpful.

 

Add comment