Angular Material Datepicker : Disable Past and Future Dates
July 14, 2020
This page will provide how to disable past and future dates in Angular Material Datepicker calendar. We can disable dates using following Datepicker input text properties.
1. Using
min
and max
properties
2. Using
matDatepickerFilter
property.
The
min
configures minimum date to be selected and max
configures maximum date to be selected. The same can be achieved by matDatepickerFilter
property. The matDatepickerFilter
can also be used to disable any specific day or month such as disable weekends in every month.
Here on this page we will provide complete example to disable past and future dates using native JavaScript
Date
as well as Moment
.
Contents
Technologies Used
Find the technologies being used in our example.1. Angular 10.0.0
2. Angular Material 10.0.0
3. Node.js 12.5.0
4. NPM 6.9.0
5. moment.js 2.27.0
Disable Past and Future Dates with min
and max
To disable past and future dates, we can use min
and max
properties in Datepicker input text with matInput
attribute.
Disable only past dates
If only past dates need to be disabled, configure only
min
property.
Disable only future dates
If only future dates need to disabled, configure only
max
property.
To disable past and future dates both we need to configure
min
and max
both. Here we will provide code with Moment
and Date
both.
1. Using
Moment
: When we create our Datepicker with MatMomentDateModule
, we need to set minimum and maximum dates using Moment
. Find the code snippet of component.
minDate: Moment; maxDate: Moment; ngOnInit() { const currentYear = moment().year(); this.minDate = moment([currentYear - 1, 0, 1]); this.maxDate = moment([currentYear + 1, 11, 31]); }
min
and max
properties in Datepicker input text.
<mat-form-field appearance="fill"> <mat-label>Date of Birth</mat-label> <input matInput [matDatepicker]="dob" [min]="minDate" [max]="maxDate" formControlName="dateOfBirth"> <mat-datepicker-toggle matSuffix [for]="dob"></mat-datepicker-toggle> <mat-datepicker #dob startView="multi-year"></mat-datepicker> </mat-form-field>
min
is with component property minDate
and property binding of max
is with component property maxDate
. Suppose current year is 2020. Then we can select calendar date from 01-Jan-2019 to 31-Dec-2021.

this.minDate = moment([currentYear - 1, 5, 10]); this.maxDate = moment([currentYear + 1, 8, 20]);
2. Using native JavaScript
Date
: When we create our Datepicker with MatNativeDateModule
, we need to set minimum and maximum dates using native JavaScript Date
. Find the code snippet of component.
minDate: Date; maxDate: Date; ngOnInit() { const currentYear = new Date().getFullYear(); this.minDate = new Date(currentYear - 1, 0, 1); this.maxDate = new Date(currentYear + 1, 11, 31); }
<mat-form-field appearance="fill"> <input matInput [matDatepicker]="dob" [min]="minDate" [max]="maxDate" formControlName="dateOfBirth"> ------ </mat-form-field>
Disable Past and Future Dates with matDatepickerFilter
We can use matDatepickerFilter
to disable past and future dates. The matDatepickerFilter
is used as property binding with Datepicker input text.
Suppose we are using
MatMomentDateModule
to create Datepicker. Create a function as below using Moment
in the component.
currentYear = moment().year(); myDateFilter = (m: Moment | null): boolean => { const year = (m || moment()).year(); return year >= this.currentYear -1 && year <= this.currentYear + 1; }
The HTML code will be as following.
<mat-form-field appearance="fill"> <mat-label>Date of Admission</mat-label> <input matInput [matDatepicker]="dtAdm" [matDatepickerFilter]="myDateFilter" formControlName="dateOfAdmission"> <mat-datepicker-toggle matSuffix [for]="dtAdm"></mat-datepicker-toggle> <mat-datepicker #dtAdm startView="multi-year"></mat-datepicker> </mat-form-field>
myDateFilter = (m: Moment | null): boolean => { const year = (m || moment()).year(); return year >= this.currentYear -1; }
myDateFilter = (m: Moment | null): boolean => { const year = (m || moment()).year(); return year <= this.currentYear + 1; }
2. When we create Datepicker using
MatNativeDateModule
then use native JavaScript Date
to disable past and future dates.
currentYear = new Date().getFullYear(); myDateFilter = (d: Date | null): boolean => { const year = (d || new Date()).getFullYear(); return year >= this.currentYear -1 && year <= this.currentYear + 1; }
Disable Weekends
To disable any specific month or day in every year or to disable any specific date conditionally, we can usematDatepickerFilter
property. For example we are disabling the weekends for every month in our below code.
Find the code using
Moment
.
myDateFilter = (m: Moment | null): boolean => { const day = (m || moment()).day(); return day !== 0 && day !== 6; }
Date
.
myDateFilter = (d: Date | null): boolean => { const day = (d || new Date()).getDay(); return day !== 0 && day !== 6; }
<mat-form-field appearance="fill"> <input matInput [matDatepicker]="dtAdm" [matDatepickerFilter]="myDateFilter" formControlName="dateOfAdmission"> ------ </mat-form-field>

Complete Example
Here we will provide complete demo application to disable past and future dates of Datepicker calendar usingmoment.js
.
student.component.ts
import { Component, OnInit } from '@angular/core'; import { FormBuilder, Validators } from '@angular/forms'; import { StudentService } from './student.service'; import * as _moment from 'moment'; import { Moment } from 'moment'; const moment = _moment; @Component({ selector: 'app-student', templateUrl: './student.component.html' }) export class StudentComponent implements OnInit { minDate: Moment; maxDate: Moment; myDateFilter = (m: Moment | null): boolean => { const dateNum = (m || moment()).date(); return dateNum >= 10 && dateNum <= 25; } constructor(private formBuilder: FormBuilder, private studentService: StudentService) { } ngOnInit() { const currentYear = moment().year(); this.minDate = moment([currentYear - 1, 5, 10]); this.maxDate = moment([currentYear + 1, 8, 20]); } studentForm = this.formBuilder.group({ name: '', dateOfBirth: '', dateOfAdmission: '' }); onFormSubmit() { this.studentService.saveStudent(this.studentForm.value); let dateOfBirth: Moment = this.studentForm.get('dateOfBirth').value; console.log(dateOfBirth.toObject()); let yearOfBirth = dateOfBirth.toObject().years; console.log('yearOfBirth : ', yearOfBirth); this.studentForm.reset(); } }
<h3>Datepicker : Disable Dates</h3> <form [formGroup]="studentForm" (ngSubmit)="onFormSubmit()"> <mat-form-field> <mat-label>Student Name</mat-label> <input matInput formControlName="name"> </mat-form-field> <br/> <mat-form-field appearance="fill"> <mat-label>Date of Birth</mat-label> <input matInput [matDatepicker]="dob" [min]="minDate" [max]="maxDate" formControlName="dateOfBirth"> <mat-datepicker-toggle matSuffix [for]="dob"></mat-datepicker-toggle> <mat-datepicker #dob startView="multi-year"></mat-datepicker> </mat-form-field> <br/> <mat-form-field appearance="fill"> <mat-label>Date of Admission</mat-label> <input matInput [matDatepicker]="dtAdm" [matDatepickerFilter]="myDateFilter" formControlName="dateOfAdmission"> <mat-datepicker-toggle matSuffix [for]="dtAdm"></mat-datepicker-toggle> <mat-datepicker #dtAdm ></mat-datepicker> </mat-form-field> <br/><br/> <button mat-raised-button>Submit</button> </form>
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class StudentService { saveStudent(student) { console.log(JSON.stringify(student)); } }
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <app-student></app-student> ` }) export class AppComponent { }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatInputModule } from '@angular/material/input'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatMomentDateModule } from '@angular/material-moment-adapter'; import { AppComponent } from './app.component'; import { StudentComponent } from './student.component'; @NgModule({ declarations: [ AppComponent, StudentComponent ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule, BrowserAnimationsModule, MatInputModule, MatDatepickerModule, MatMomentDateModule ], providers: [], bootstrap: [ AppComponent ] }) export class AppModule { }
Run Application
To run the application, find the steps.1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Install
moment.js
.
npm install moment --save
5. Use downloaded src in your Angular CLI application.
6. Run ng serve using command prompt.
7. Access the URL http://localhost:4200
Find the print screen of the output.

References
DatepickerMoment.js Documentation