我们如何将日期选择器的默认值设置为从今天算起 1 年？

Question

我们如何设置 angular mat 日期选择器，其中默认选择的值是从今天起 1 年？。谢谢

加载日期纠察线时，默认值应为从现在起 1 年。

#html代码

<mat-form-field appearance="fill" class="full-width"  [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 class="mat-form-field-subscript-wrapper date-field-custom-error" *ngIf="walgreensFields.formError.nextNoticeEndDate !== null">
                  <div class="mat-error">{{walgreensFields.formError.nextNoticeEndDate}}</div>                        
                </div>
             </mat-form-field>

Answer 1

三种方式：

在输入中设置 [value] 属性，在这个 stackblitz 中，我将其设置为今天的日期。 (https://stackblitz.com/edit/mat-datepicker-work-naxbzw?file=src/app/datepicker-overview-example.html)
如果使用表单，则将特定的表单控件设置为您想要的默认日期。
使用您的 ngModel

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

Answer 2

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

Answer 3

您可以使用 [(ngModel)] 将绑定到日期选择器的 walgreensFields.nextNoticeEndDate 的默认值设置为从今天的日期算起一年。为此，您可以使用 Date#setFullYear 将年份设置为比当前年份多一年 Date#getFullYear:


  exampleDate = new Date();

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

我们如何将日期选择器的默认值设置为从今天算起 1 年？

How do we set a datepicker default value to 1 year from today?

angular

typescript

angular-material

datepicker