Angular 12 Material Datepicker Disable Weekends

Datepicker disable weekends in angular 12; In this tutorial i am going to show you how do you disable weekends (Sunday and Saturday) on datepicker in angular 12 material.

Angular Material is a UI component library for Angular JS developers. Angular Material components help in constructing attractive, consistent, and functional web pages and web applications while adhering to modern web design principles like browser portability, device independence, and graceful degradation.

Disable Weekends in Angular 12 Material Datepicker

Step 1 – Create New Angular App
Step 2 – Install Angular Material Design
Step 3 – Import Material Module
Step 4 – Add Code on View File
Step 5 – Add Code On Component ts File
Step 6 – Start Angular App

Step 1 – Create New Angular App

Execute the following command on terminal to install angular app:

ng new my-new-app

Step 2 – Install Angular Material Design

Install angular material design for date range picker. so open terminal and execute the following command on it:

ng add @angular/material

After that, you will look like on your terminal:

Installing packages for tooling via npm.
Installed packages for tooling via npm.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink     
   [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes

Step 3 – Import Material Module

Import MatDatepickerModule, MatNativeDateModule, MatFormFieldModule and ReactiveFormsModule from angular/material. So visit src/app directory and open app.module.ts and then update the following code into it:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
      
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports:      [
    BrowserModule, 
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4 – Add Code on View File

Create HTML and implement datepicker in angular 12 app. So, visit src/app/app.component.html and update the following code into it:

<h1>Angular 12 material datepicker disable weekends dates - Lartutorials.Com</h1>
     
<mat-form-field>
  <input matInput [matDatepicker]="picker" [matDatepickerFilter]="weekendsDatesFilter" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker ></mat-datepicker>
</mat-form-field>

Recommended:-Bar Chart in Angular 12 using Chart.js

Step 5 – Add Code On Component ts File

Go to src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'my-app';
  
    weekendsDatesFilter = (d: Date): boolean => {
        const day = d.getDay();
  
        /* Prevent Saturday and Sunday for select. */
        return day !== 0 && day !== 6 ;
    }
}

Step 6 – Start Angular App

Execute the following commands on terminal to start angular app:

ng serve