Angular 11 Material Datepicker Disable Weekends Dates

Angular 11 date picker disable weekends (Sunday and Saturday) example. In this tutorial will help you on how to disable weekends (Sunday and Saturday) on datepicker in angular 11 material.

In this tutorial will guide you on on angular material datepicker disable weekends. And you’ll learn angular material datepicker disable sunday and saturday. This example will give you a simple and easy example of angular 11 datepicker disable weekends.

Angular 11 Material Datepicker Disable Weekends Dates Example

  • Step 1 – Create New Angular App
  • Step 2 – Install Angular Material Design
  • Step 3 – Import Angular 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

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install Angular Material Design

In this step, you need to 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 Angular Material Module

In this step, you need to 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

In this step, create HTML and implement datepicker in angular 11 app. So, visit src/app/app.component.html and update the following code into it:

<h1>Angular 11 material datepicker disable weekends dates - Tutsmake.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>

Step 5 – Add Code On Component ts File

In this step, visit the 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 &amp;&amp; day !== 6 ; }
}

Step 6 – Start Angular App

In this step, execute the following commands on terminal to start angular app:

ng serve

Recommended Angular Posts

Related Posts