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.
Asked
Active
Viewed 1.9k times
1 Answers
36
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();

Carsten
- 4,005
- 21
- 28
-
Edit : "this.tomorrow.getDate() + 1" this line should be replaced with "this.tomorrow.getDate()". – Ankush Dutt Feb 22 '21 at 06:43
-
Why do you think so @AnkushDutt ? – Carsten Feb 24 '21 at 13:48
-
this.tomorrow.getDate() will give us the current date. So ideally it should be the current date from where we want to validate any of the future dates. With this.tomorrow.getDate()+1 will give us one day ahead of the current day and the user would be able to select the one day from the current day. Basically your line would work perfectly if we want to stop user from selecting all the dates ahead of the tomorrow date. But I think we need to validate all the future dates. – Ankush Dutt Feb 25 '21 at 16:40
-
@AnkushDutt Just tested it, you are indeed correct. This changed since march 15 2019. – Carsten Feb 26 '21 at 09:07