代码之家 › 专栏 › 技术社区 › MatterOfFact

基于MatDatePicker的自定义日期选择器-打开选择器和焦点输入

angular7 angular-material2 angular

0

MatterOfFact · 技术社区 · 7 年前

大家好

单击输入字段(背景色:棕色)时,日历将打开,输入字段将被聚焦。因此,用户可以从日历中选择日期,也可以手动将其输入到输入字段中。

<mat-form-field (click)="datePicker.open();">

日历打开,但输入字段没有聚焦。即使将focus方法添加到click eventhandler中,输入字段也不会获得焦点:

 <mat-form-field (click)="datePicker.open(); input.focus()">

似乎在单击mat表单字段时,我必须选择是打开日历还是聚焦输入字段,但两者都要:-)

我也试着打电话给 input.click() 方法 mat-form-field.click()

非常感谢你。

1 回复 | 直到 7 年前

1

MatterOfFact 7 年前

我成功地把 this.dateInput.nativeElement.focus() 对setTimeout函数的方法调用:

模板:

<mat-form-field (click)="datePicker.open(); focusInputField();">

  focusInputField() {
    setTimeout(() => this.dateInput.nativeElement.focus());
  }

我更新了stackblitz示例。