I am currently learning Angular 8 and I am looking to globally set the minimum and maximum dates for a datepicker in my application. I would like to accomplish this by using format-datepicker.ts. Any suggestions on how I can achieve this?
Min date: Jan 1, 2017 Max date: Dec 31, 2020
If you have any ideas or recommendations, please share them.
Below is the Angular code snippet:
format-datepicker.ts
import { NativeDateAdapter, MatDateFormats } from '@angular/material';
export class CarDateAdapter extends NativeDateAdapter {
/**
* Formats the date according to 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 unsure about how to set the min and max dates so that the options between Jan 1, 2017 and Dec 31, 2020 are grayed out. Is it possible to achieve this in the specified way?
Thank you!