Mat date start date end date validation angular 8

user_4659026 0
Viewed 16463

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>
mat-datepicker angular8 material-ui angular-material angular
3 Answers

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>
user_119772450

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

user_150413250

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>
user_94273950
Related