How do we set to an angular mat date picker where the default selected value is 1 year from today ?. Thanks.

When the date picket loads the default value should be 1 year from now.

#html code

<mat-form-field appearance="fill"   [ngClass]="{'date-field-error-underline': walgreensFields.formError.nextNoticeEndDate !== null}">
                <mat-label [ngClass]="{'c-error':walgreensFields.formError.nextNoticeEndDate !== null}">Expiration Date Range (End)</mat-label>
                  <input 
                  matInput 
                  hidden
                  (dateChange)="setNextNoticeEndDate($event)" 
                  [(ngModel)]="walgreensFields.nextNoticeEndDate"
                  [matDatepicker]="endDatePicker"
                  >
                <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
                <mat-datepicker #endDatePicker></mat-datepicker>
                <div  *ngIf="walgreensFields.formError.nextNoticeEndDate !== null">
                  <div >{{walgreensFields.formError.nextNoticeEndDate}}</div>                        
                </div>
             </mat-form-field>

CodePudding user response：

You can set the default value of your walgreensFields.nextNoticeEndDate that is binded to the datepicker using [(ngModel)] to one year from today's date. To do this you could use Date#setFullYear to set the year to one more than current Date#getFullYear:

  exampleDate = new Date();

  ngOnInit(): void {
     walgreensFields.nextNoticeEndDate = this.exampleDate.setFullYear(this.exampleDate.getFullYear()   1);
  }

CodePudding user response：

walgreensFields.nextNoticeEndDate= new Date(new Date().setFullYear(new Date().getFullYear()-1))

CodePudding user response：

Three ways:

1. Set the [value] property on the input, in this stackblitz I have it set for today's date. (https://stackblitz.com/edit/mat-datepicker-work-naxbzw?file=src/app/datepicker-overview-example.html)

2. If using a form, then set the specific formControl to have your desired default date.

3. Using your ngModel

   ngOnInit(): void { walgreensFields.nextNoticeEndDate = this.exampleDate.setFullYear(this.exampleDate.getFullYear() 1); }