CODEWITHSUNDEEP
javascriptangulartypescriptangular-materialmaterial-design
Cpt Kitkat
Cpt Kitkat

Reputation: 1402

How to disable Values before Today in Mat-Date Picker

I have two Mat-Date Picker which I use to schedule work. I want to apply a couple of custom validations such as User should not be able to select start date less than today's date and Start Date should be less than End Date.

I am having an issue in figuring out how to dynamically set start day less than the Current Date every day.

For eg: As on 30/03/2020 all dates before should be disabled. As on 31/032020 even today's date should be disabled.

My HTML Code:

<mat-form-field>
        <mat-label>Start Date</mat-label>
        <input
          matInput
          [matDatepicker]="picker"
          formControlName="startDate"
          readonly
        />
        <mat-datepicker-toggle
          matSuffix
          [for]="picker"
        ></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>

Typescript Code:

this.Dategroup= new FormGroup({
  startDate: new FormControl('', [Validators.required]),
  endDate: new FormControl('', [Validators.required])
});

Upvotes: 0

Views: 2215

Answers (1)

Mridul
Mridul

Reputation: 1366

You just need to add min property to disable previous dates from today.

Example: In html

   <mat-form-field>
    <mat-label>Start Date</mat-label>
    <input matInput [matDatepicker]="picker" [min]="minDate" formControlName="startDate" readonly />
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

In your ts file:

Add minDate: Date;

constructor(){
this.minDate = new Date();
}

Upvotes: 6

Related Questions