Disable particular dates in Angular Material Date picker

angular angular-material angular6 angular-material-datetimepicker
Shashank picture Shashank · Jul 30, 2019 · Viewed 10.4k times · Source

I'm trying to us Angular 6 Material datepicker for one of my projects. I need to disable particular dates or give the user an option to choose particular dates(can be some random dates).

<mat-card>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #pickers></mat-datepicker>
    <app-date-picker></app-date-picker>
  </mat-card>
``

Answer

Patryk Łucka picture Patryk Łucka · Jul 30, 2019

You have to use date validation:

https://material.angular.io/components/datepicker/overview#date-validation

So you can use min and max properties or matDatepickerFilter for more specified filters (probably better for your case). You can check two examples in the link above (first min and max, 2nd with matDatepickerFilter).

Related questions

Angular 6 error show to 'mat-form-field' is not a known element:

Hi I am using angular 6 and my code is as follows: import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule, Routes } from …

Read More
how to pass data from angular material dialog to parent component?

I'm using angular 6 and I have a button which opens a dialog. in my dialog, I have a form that gets user's data and then I have two buttons to submit and cancel. I tried to show my form's data …

Read More
Angular Material mat-select dynamic data binding in Angular

I am using Angular 6 and Angular Material. When i click on Edit button the Secondary, SSC and Male Value will be initialized on the select. But i can not able to do it. I only able to show Male value …

Read More