格式为 MM.yyyy 的 Angular 日期选择器想要选择日期

Question

我想使用只接受月份和年份的日期选择器。根据 Angular Materials，我构建了一个函数，该函数应该在选择月份后关闭日期选择器 - 这样就无法选择任何一天。第一次调用日期选择器时（无论是否已在此处保存值）仍然需要日期。然而，当你再次调用它时，它就没有了。

<mat-form-field fxFlex [subscriptSizing]="subscriptSizing">
    <mat-label>{{label}}</mat-label>
    <input matInput [matDatepicker]="picker" [formControl]="control" autocomplete="off">
    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker 
    startView="multi-year" 
    (yearSelected)="chosenYearHandler($event)"
    (monthSelected)="chosenMonthHandler($event, picker)"
    panelClass="example-month-picker"></mat-datepicker>
  </mat-form-field>

ts 文件：

  chosenYearHandler(normalizedYear: Moment) {
    const ctrlValue = this.control.value;
    ctrlValue.year(normalizedYear.year());
    this.control.setValue(ctrlValue);
  }

  chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
    const ctrlValue = this.control.value;
    ctrlValue.month(normalizedMonth.month());
    this.control.setValue(ctrlValue);
    datepicker.close();
  }

日期由控件注入。

我是角度初学者，非常感谢任何帮助！

Answer 1

第一次需要选择日期的原因是

ctrlValue

是

null

，调用

ctrlValue.year(/* value */)

和

ctrlValue.month(/* value */)

时会破坏代码。

相反，请通过设置触发

chosenMonthHandler

时的控制值来修改代码，如下所示。

chosenYearHandler(normalizedYear: Moment) {}

chosenMonthHandler(
  normalizedMonth: Moment,
  datepicker: MatDatepicker<Moment>
) {
  this.control.setValue(normalizedMonth);
  datepicker.close();
}

演示@StackBlitz