How to enable only specific dates in Angular 5?


I have set of dates and I want to enable only those dates in <mat-datepicker>.

"ListOfDates": [
         "startDate": "2018-01-01T08:00:00"
         "startDate": "2018-01-02T08:00:00"
        "startDate": "2018-01-03T09:00:00",

This is my html code:

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

In my Component.ts file:

export class SomeComponent.ts {

    dateFilter = (date: Date) => date.getDate()


Can anyone help on this?


You are going to need a custom validator. More details can be found here:

Essentially you give a function that takes in a date and returns a boolean indicating whether that date is valid. In your case you want to in your controller check if the given date is a member of your list. Here is a basic implementation:


<mat-form-field class="example-full-width">
  <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>


import {Component} from '@angular/core';

/** @title Datepicker with filter validation */
  selector: 'datepicker-filter-example',
  templateUrl: 'datepicker-filter-example.html',
  styleUrls: ['datepicker-filter-example.css'],
export class DatepickerFilterExample {
  validDates = {
    "2018-01-01T08:00:00": true,
    "2018-01-02T08:00:00": true

  myFilter = (d: Date): boolean => {
    // Using a JS Object as a lookup table of valid dates
    // Undefined will be falsy.
    return validDates[d.toISOString()];

Answered By – VivaLaPanda

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.