Angular 7 Validate two dates - Start Date & End Date

In this article, I am sharing How to compare two dates in angular JS 7.

Example:-

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

import { LoanRequest } from '../model/loan';

@Component({

  selector: 'LHCCalculator',

  templateUrl: './calculator.component.html',

  styleUrls: ['./calculator.component.css']

})

export class CalculatorComponent implements OnInit {

  constructor(private EncrDecr: EncrDecrService,

              private  http:  HttpClient,

              private datePipe: DatePipe)

              {   }

  //model class

  model = new LoanRequest(null, null, null, null, null);

  //Error Display

  error:any={isError:false,errorMessage:''};

  isValidDate:any;

  ngOnInit() {

  }

  onSubmit(){

    this.model.StartDate = this.datePipe.transform(this.model.StartDate,"dd-MM-yyyy");

    this.model.NextPayDate = this.datePipe.transform(this.model.NextPayDate,"dd-MM-yyyy");   

    this.isValidDate = this.validateDates(this.model.StartDate, this.model.NextPayDate);

    if(this.isValidDate){

       this.http.post<LoanRequest>(environment.API_URL + "Calculate/LHC", this.model, this.options)

          .subscribe(res => {

              console.log(res);

              //func - clear UI

              this.clearLHCCAL();

            },

            err => {

              console.log(err);

          });

    } 

  }

  validateDates(sDate: string, npDate: string){

    this.isValidDate = true;

    if((sDate == null || npDate ==null)){

      this.error={isError:true,errorMessage:'The StartDate Required. '};

      this.isValidDate = false;

    }

    if((sDate != null && npDate !=null) && (npDate) < (sDate)){

      this.error={isError:true,errorMessage:'Next date should be grater then start date.'};

      this.isValidDate = false;

    }   

    return this.isValidDate;

  }

 }

AddComponet.html

<form (ngSubmit)="onSubmit()" #loanForm="ngForm">

            <div class="row form-group">

                <div class="col-sm">

                        <label for="">Loan Amount</label>

                        <input type="text" numbersOnly required  [(ngModel)]="model.LoanAmount"id="LoanAmount" name="LoanAmount" class="form-control" placeholder="Loan amount">

                </div>

                <div class="col-sm">

                        <label for="">Loan tenure</label>

                        <input type="text" numbersOnly required [(ngModel)]="model.LoanTenure" id="LoanTenure"name="LoanTenure" class="form-control" placeholder="Loan tenure">

                </div>

            </div>

            <div class="row form-group">

                <div class="col-sm">

                    <label  for="StartDate">Start Date</label>

                    <ejs-datepicker format='dd/MM/yyyy' id='datepicker' placeholder='Select start date'

                        [(value)]='model.StartDate'></ejs-datepicker>                         

                </div>

                <div class="col-sm">

                        <label  for="StartDate">Next Pay Date</label>

                        <ejs-datepicker format='dd/MM/yyyy' id='datepicker' placeholder='Select next pay date'

                            [(value)]='model.NextPayDate'></ejs-datepicker>

                </div>

            </div>

            <div class="row form-group">

                <div class="col-sm">     

                    <label for="">Interest Rate</label>

                    <input type="text" OnlyNumeric required [(ngModel)]="model.InterestRate" id="InterestRate"name="InterestRate" class="form-control" placeholder="Interest rate">          

                </div>

                <div class="col-sm mt-4">                   

                    <input type="submit" [disabled]="!loanForm.form.valid" value="Submit" class="btn btn-danger btnRed">

                </div>

            </div>

        </form>

ErrorDisplayPage.html

<div class="text-danger" *ngIf="error.isError">{{error.errorMessage}}</div>

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

About Mariano

I'm Ethan Mariano a software engineer by profession and reader/writter by passion.I have good understanding and knowledge of AngularJS, Database, javascript, web development, digital marketing and exploring other technologies related to Software development.