angular - Material Datepicker defaults to 2001. Can this be changed?

Question

I am new to Angular and i am looking for some help in material Datepicker. when we enter 1 and tab out, i see this defaults to 1/1/2001. I know this a default behavior.

Any idea on how i can override and give any year by default.

https://stackblitz.com/angular/bvldlnqdrgk?file=src%2Fapp%2Fdatepicker-overview-example.ts

https://material.angular.io/components/datepicker/overview

Above stackblitz was taken from Material site. Can anyone help me out ?

Angular 10

Material 10

Thanks in Advance

Answer 1

So you can make a directive that will set whatever date you want when a user tabs out.

I am using a form group with a form control but you can also set the value by getting access to the DOM element and setting the value there (i can edit the stackblitz if this is what you want to do).

Here is my StackBlitz demonstrating this: https://stackblitz.com/edit/date-picker-directive?file=src/main.ts

Here is my directive specifically:

import { Directive, HostListener } from "@angular/core";
import { NgControl } from "@angular/forms";

@Directive({
  selector: "[appYearSelector]"
})
export class YearSelectorDirective {
  @HostListener("blur", ["$event"]) onBlur() {
    this.ngControl.control.setValue(new Date());
  }

  constructor(private ngControl: NgControl) {}
}