CODEWITHSUNDEEP
angularangular-material
SGR
SGR

Reputation: 2427

To avoid taking future date in material datepicker component

I am using material datepicker component, I want restrict the future dates in datepicker component, While surfing i found the solution solution1 ,solution2, but these solution suits good for normal datepicker.But i want to restrict in material datepicker.If possible please provide the solution in this DEMO.

Upvotes: 13

Views: 24459

Answers (2)

Latika Jaju
Latika Jaju

Reputation: 19

<input matInput [matDatepicker]="picker" [max]="today" formControlName="dob"/>

in ts file get today's date:-
 get today():Date{
    return new Date();
  }

enter image description here

Upvotes: 1

Carsten
Carsten

Reputation: 4208

MatDatepickerInput has an @Input for this

@Input()
max: D | null

See this short example:

<mat-form-field>
  <input matInput [matDatepicker]="picker" [max]="today" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

TS file:

today = new Date();

Upvotes: 40

Related Questions