How to compare two dates in angular 4 and display error message?

Question

I want to display an error message when end date is less than start date. I'm using my-date-picker.

I have tried following approach but not sure why its not working. As I'm new to angular I tried this approach by going online tutorials, this is what I have achieved so far.

this is my html code:

<form [formGroup]="myForm" novalidate>
  <div class="form-input">
      <my-date-picker name="startDateMod" [options]="startDate" formControlName="startDateMod" required (dateChanged)="onDateChanged($event)"></my-date-picker>
      <my-date-picker name="endDateMod" [options]="endDate" formControlName="endDateMod" required (dateChanged)="onDateChanged($event)"></my-date-picker>
  </div>
  <button class="button" type="submit" [disabled]="myForm.controls.errors||">Submit</button>
  <p class="error" *ngIf="myForm.controls.errors">Date is required!</p>
</form>

In ts file:

ngOnInit() {
    this.myForm = this.formBuilder.group({
        startDateMod: [null, Validators.required],
        endDateMod: [null, Validators.required]

    });
}
 onDateChanged(event){
   let startDate = this.myForm.startDateMod.value.epoc;//Getting epoc values to compare 
   let endDate = this.myForm.endDateMod.value.epoc;
   if(endDate>startDate){
    /*Not sure what to add here to display error message on html page because i'm not getting any error when i'm performing this step
}

}

I'm getting start and end date but date comparison is not working and also not sure how to get an error message to display on page.I expect when I click on any date, start and end date should compare and if end date is less than start date error message should display and search button get disabled.

Possible duplicate of [Angular 2 form validations start date <= end date](https://stackoverflow.com/questions/43779438/angular-2-form-validations-start-date-end-date) — TheUnreal, Sep 12 '19 at 05:30
Refer this: https://stackoverflow.com/questions/42622299/date-difference-in-hours-angular-2 — Soumya B. Athani, Sep 12 '19 at 05:33
I have tried that but it was not working in my case...thanks by the way — Uidev123, Sep 12 '19 at 05:33

score 0 · Answer 1 · answered Sep 12 '19 at 05:33

0

if (startDate.getTime() < endDate.getTime())

Note that if your dates are in string format, you first need to parse them to Date

answered Sep 12 '19 at 05:33

harkesh kumar

833
2
13
35

can u tell me the full solution on how to get it working – Uidev123 Sep 12 '19 at 05:37

How to compare two dates in angular 4 and display error message?

1 Answers1