CODEWITHSUNDEEP
angularangular-materialangular-material2
Danesh
Danesh

Reputation: 45

Material Datepicker defaults to 2001. Can this be changed?

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

Upvotes: 0

Views: 1003

Answers (1)

sadako1287
sadako1287

Reputation: 189

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) {}
}

Upvotes: 0

Related Questions