Setting date min and max limit for DatePicker in Angular 8 in typescript globally for the application

Question

I am very new to Angular 8, and trying to set min and max date for the datepicker globally for the application. I want to set the dates using format-datepicker.ts, Is there any way I could achieve the same.

Min date : Jan 1 2017 Max date : Dec 31 2020

Any ideas or suggestions would be helpful.

Here is my Angular code

format-datepicker.ts

import { NativeDateAdapter, MatDateFormats } from '@angular/material';

export class CarDateAdapter extends NativeDateAdapter {

    /**
     * Formats the date as per the display format.
     * 
     * @param date The date
     * @param displayFormat The display format 
     */
    format(date: Date, displayFormat: Object): string {
        if(displayFormat === 'input') {
            let dayOfMonth : string = date.toLocaleDateString('default', { day: 'numeric' });
            let monthOfYear :  string = date.toLocaleDateString('default', { month: 'long' }).substring(0, 3);
            let year : number = date.getFullYear();
            return `${monthOfYear} ${dayOfMonth}, ${year}`;
        }
        return date.toDateString();
    }
}

export const DATE_FORMATS: MatDateFormats = {
    parse: {
        dateInput : { month: 'long', year: 'numeric', day: 'long'  }
    },
    display: {
        dateInput: 'input',
        monthYearLabel: { year: 'numeric', month: 'long' },
        dateA11yLabel: { year: 'numeric', month: 'long', day: 'long' },
        monthYearA11yLabel: { year: 'numeric', month: 'long' }
    }
}

car-info.component.ts

@Component({
  selector: 'car-info',
  templateUrl: './car-info.component.html',
  styleUrls: ['./car-info.component.scss'],

  providers: [
    {provide: DateAdapter, useClass: CarDateAdapter},
    {provide: MAT_DATE_FORMATS, useValue: DATE_FORMATS}
  ]
})

car-info.component.html

            <mat-grid-tile colspan=1 rowspan=1>
                <div class="car-datepicker">
                    <input  placeholder="Enter Car Start Date"
                            [matDatepicker]="busstart"
                            formControlName="busStrtDt">       
                    <mat-datepicker #busstart></mat-datepicker>
                    <button mat-icon-button (click)="busstart.open()">
                        <mat-icon>event</mat-icon>
                    </button>
                </div>
            </mat-grid-tile>

I am confused how to set the min and max date, such that the date option are grayed out between Jan 1 2017 and Dev 31 2010.

Is it even possible to do it this way.

Thanks !

Answer 1

Declare in your ts component the minDate and maxDate variables:

minDate: Date = new Date (2017, 1, 1); <br>
maxDate: Date = new Date (2020, 12, 31); <br>

Now, in the html document, use the [min] and [max] attribute to control your datepicker:

[min]="minDate" [max]="maxDate"

Answer 2

i'm searching for the same functionality and the DateAdaptor hasn't a property to set the setting min and max date globally; i think the best solution for this is make a custom component that implements datepicker or show it, this component must has de min and max date like @Emmanuel says and pass it to datepicker max and min date attribute.

By the moment, i created a issue on github to know if exist some setting: https://github.com/h2qutc/angular-material-components/issues/213