Mat date start date end date validation angular 8

Question

I am working on Mat date picker where I have start date and end date where I have one validation that is end date should not be lesser than start date for example

if start date was 12-JAN-2020 end date can be 12-JAN-2020 or greater than this but it can not be 11-JAN-2020.

Currently I was trying with Min MAX but this is not working as expected

I was trying in google & SO not getting correctly

   <mat-form-field>
      <input matInput [matDatepicker]="fromDate" placeholder="Choose a date"
          [value]="getData(item2.firstPatientInDate)" [max]="today<item2.lastPatientInDate|| item2.lastPatientInDate == undefined?today:item2.lastPatientInDate" [(ngModel)]="item2.firstPatientInDate">
                    <mat-datepicker-toggle matSuffix [for]="pickerstart"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>

        <mat-form-field>
           <input matInput [matDatepicker]="pickerend" [max]="today" [min]="item2.firstPatientInDate"   placeholder="Choose a date"
                        [value]="getData(item2.lastPatientInDate)" [(ngModel)]="item2.lastPatientInDate">
                    <mat-datepicker-toggle matSuffix [for]="pickerend"></mat-datepicker-toggle>
                    <mat-datepicker #picker1></mat-datepicker>

                </mat-form-field>

score 5 · Answer 1 · answered Apr 02 '20 at 11:07

5

You can find a working sample in below link:

stackblitz: angular material start-end date sample

TypeScript file

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

@Component({
  selector: 'datepicker-value-example',
  templateUrl: 'datepicker-value-example.html',
  styleUrls: ['datepicker-value-example.css'],
})
export class DatepickerValueExample {
  startDate = new FormControl(new Date());
  endDate = new FormControl(new Date());
}

HTML file

<mat-form-field>
  <input matInput [matDatepicker]="picker1" placeholder="Start Date" [formControl]="startDate">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

<mat-form-field>
  <input matInput [matDatepicker]="picker2" placeholder="End Date"
   [min]="startDate.value" [formControl]="endDate">
  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
  <mat-datepicker #picker2></mat-datepicker>
</mat-form-field>

answered Apr 02 '20 at 11:07

Harsh

350
1
4
13

basically I am getting value from service to display the date but with your above code that's not working so i tried added value but still got some error – Mr.M Apr 02 '20 at 12:48
Please update your question accordingly, from where you assign data to filed and which error you are getting – Harsh Apr 02 '20 at 13:37
I need to get the value from service also so I am using value can you please check this – Mr.M Apr 02 '20 at 13:41
I am getting error ```Cannot read property 'value' of undefined``` I have in my form formControlName , what is the difference between it and [formControl]? – Pinka Apr 21 '21 at 04:34

score 2 · Accepted Answer · answered Apr 02 '20 at 05:52

Use this way with reactive forms with custom validation

constructor(private formBuilder: FormBuilder) { 
   this.yourForm = this.formBuilder.group({
   startDate: [''],
   endDate: ['']
   }, {validator: this.checkDates});  
}

checkDates(group: FormGroup) {
   if(group.controls.endDate.value < group.controls.startDate.value) {
   return { notValid:true }
   }
   return null;
}

In your Front End

<small *ngIf="yourForm.hasError('notValid')">Not valid</small>

score 2 · Answer 3 · answered Jan 27 '21 at 10:37

Try this way for the customized date range validation

In the HTML code, as you can see on (dateChange) event. I created comparisonStartdateValidator and comparisonEnddateValidator methods for the validation of inputted date range.

HTML file

  <mat-form-field appearance="outline">
    <mat-label> Covering Start Date </mat-label>
    <input
      matInput
      [matDatepicker]="CovStartdate"
      formControlName="covstartdate"
      (dateChange)="comparisonStartdateValidator()"
      required
    />
    <mat-datepicker-toggle
      matSuffix
      [for]="CovStartdate"
    ></mat-datepicker-toggle>
    <mat-datepicker #CovStartdate></mat-datepicker>
    <mat-error
      *ngIf="
        formGroup.controls['covstartdate'].hasError('invaliddaterange')
      "
    >
      <strong>Start date cannot be greater than end date</strong>
    </mat-error>
    <mat-error
      *ngIf="formGroup.controls['covstartdate'].hasError('required')"
    >
      Covering Start date is <strong>required</strong>
    </mat-error>
  </mat-form-field>

  <mat-form-field appearance="outline">
    <mat-label> Covering End Date </mat-label>
    <input
      matInput
      [matDatepicker]="CovEnddate"
      formControlName="covenddate"
      (dateChange)="comparisonEnddateValidator()"
      required
    />
    <mat-datepicker-toggle
      matSuffix
      [for]="CovEnddate"
    ></mat-datepicker-toggle>
    <mat-datepicker #CovEnddate></mat-datepicker>
    <mat-error
      *ngIf="formGroup.controls['covenddate'].hasError('invaliddaterange')"
    >
      <strong>End date cannot be earlier than start date</strong>
    </mat-error>
    <mat-error
      *ngIf="formGroup.controls['covenddate'].hasError('required')"
    >
      Covering End date is <strong>required</strong>
    </mat-error>
  </mat-form-field>
</div>

Date range pic initial

TS file

Here in TS code, You may use my customized validations below. The comparisonEnddateValidator method validates the End date while the comparisonStart dateValidator validates the start date.

   constructor() { 
     formGroup: FormGroup = new FormGroup({
       covenddate: new FormControl(),
       covstartdate: new FormControl()
     });
   }

  comparisonEnddateValidator(): any {
    let ldStartDate = this.formGroup.value['covstartdate'];
    let ldEndDate = this.formGroup.value['covenddate'];

    let startnew = new Date(ldStartDate);
    let endnew = new Date(ldEndDate);
    if (startnew > endnew) {
      return this.formGroup.controls['covenddate'].setErrors({ 'invaliddaterange': true });
    }

    let oldvalue = startnew;
    this.formGroup.controls['covstartdate'].reset();
    this.formGroup.controls['covstartdate'].patchValue(oldvalue);
    return this.formGroup.controls['covstartdate'].setErrors({ 'invaliddaterange': false });
  }

  comparisonStartdateValidator(): any {
    let ldStartDate = this.formGroup.value['covstartdate'];
    let ldEndDate = this.formGroup.value['covenddate'];

    let startnew = new Date(ldStartDate);
    let endnew = new Date(ldEndDate);
    if (startnew > endnew) {
      return this.formGroup.controls['covstartdate'].setErrors({ 'invaliddaterange': true });
    }

    let oldvalue = endnew;
    this.formGroup.controls['covenddate'].reset();
    this.formGroup.controls['covenddate'].patchValue(oldvalue);
    return this.formGroup.controls['covenddate'].setErrors({ 'invaliddaterange': false });
  }

Start date picture error sample End date picture error sample

Mat date start date end date validation angular 8

3 Answers3