How to enable only specific dates in Angular 5?

Question

I have set of dates and I want to enable only those dates in .

\"ListOfDates\": [
      {
         \"startDate\": \"2018-01-01         


        

Answer 1

You are going to need a custom validator. More details can be found here: https://material.angular.io/components/datepicker/overview#date-validation

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:

HTML:

TS:

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

/** @title Datepicker with filter validation */
@Component({
  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()];
  }
}