Compare 2 dates which are selected using datepicker in angular material-CodePudding

I have 2 datepickers ion a form. I want an error to occur if the tillDate is less than fromDate. This is how I am trying to do, but am not successful. How can I compare the 2 dates? Thank you

This is html

                       <div >
                        <div >
                            <mat-form-field  appearance="standard">
                                <mat-label>From Date</mat-label>
                                <input matInput formControlName="fromDate" required (change)="onTillDate()"
                                    [matDatepicker]="picker" placeholder="mm/dd/yyyy" > 
                                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                                <mat-datepicker #picker></mat-datepicker>
                                <mat-error *ngIf="hasError('fromDate')" >
                                   From Date is a required field
                                </mat-error>
                            </mat-form-field>
                        </div>

                        <div >
                            <mat-form-field  appearance="standard">
                                <mat-label>Till Date</mat-label>
                                <input matInput formControlName="tillDate" required 
                                    [matDatepicker]="pickerTillDate" placeholder="mm/dd/yyyy" (change)="onTillDate()" >
                                <mat-datepicker-toggle matSuffix [for]="pickerTillDate"></mat-datepicker-toggle>
                                <mat-datepicker #pickerTillDate></mat-datepicker>
                              <mat-error *ngIf="tillDate.hasError('mismatch')"  > Till Date should be equal to greater than From Date
                            </mat-error>
                            </mat-form-field>
                        </div>
                    </div>

this is ts file

  onTillDate(){
      const startDate =  (moment(this.fromDate.value)).toDate();
      const endDate =(moment(this.tillDate.value)).toDate();
    if(endDate < startDate ){
      this.tillDate.setErrors({mismatch:true});
    }
    else
    {
      this.tillDate.setErrors(null);
    }
  }

CodePudding user response：

Angular has builtin formatDate method so you can use it to format your date and also compare it simply like below code:

In your component.ts file:

   date1 = formatDate(inputDate1,'yyyy-MM-dd','en_US');
   date2  = formatDate(inputDate2,'yyyy-MM-dd','en_US');

   if(date1>date2){
     console.log('---date1 is greater----');
    }else{
     console.log('---date2 is greater-----');
    }

CodePudding user response：

I was able to call the change event. My error was instead of using dateChange I was using change , which was not calling the event. So the correct function would be as : {

<input matInput formControlName="tillDate" required [matDatepicker]="pickerTillDate" placeholder="mm/dd/yyyy" (dateChange)="onTillDate()"/> }