angular material 2 日期选择器自动打开焦点

Question

如何angular material 2 日期选择器可以配置为焦点自动打开？我在 https://material.angular.io/components/datepicker/overview.

的文档中没有找到任何内容

目前的html是这样的：

 <input [mdDatepicker]="myDatepicker" id="inputWeekEnding" name="inputWeekEnding" type="text" class="form-control" show-button-bar="false"
      [(ngModel)]="weekEnding" [mdDatepickerFilter]="weekEndingPickerFilter" (ngModelChange)="weekEndingChanged()"
              required>
<span class="input-group-btn">
  <button type="button" class="btn btn-default" [mdDatepickerToggle]="myDatepicker">
    <i class="glyphicon glyphicon-calendar"></i>              
  </button>
</span>
<md-datepicker #myDatepicker md-open-on-focus ></md-datepicker>

Answer 1

mdDatepicker 提供方法 open() 以便开发人员手动打开它。您可以在 md-input 的焦点事件中调用它。请参阅 docs(Method of MatDatepicker)。

<md-input-container>
  <input mdInput [mdDatepicker]="picker" (focus)="picker.open()" placeholder="Choose a date">
  <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>

Demo（包含在焦点上打开和在打字稿中打开的演示）

Answer 2

对于新的 Angular & Material（5 及以上）它应该是这样的。有问题的 link 指向 up-to-date 文档，但使用 Angular 2 中的代码，这可能会让新手感到困惑。

<mat-form-field>
      <input matInput [matDatepicker]="picker" (focus)="picker.open()" formControlName="yourControlName">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Answer 3

根据@angular/material2 v7.0.1，我已经能够正确处理输入焦点...

在 matInput 输入元素上添加 (focus)="picker.open()" 以触发焦点打开的日期选择器
在 mat-datepicker 元素上添加 (closed)="input.blur()" 以便它可以在日期选择器关闭后移除对输入的焦点

<mat-form-field>
  <input matInput #input [matDatepicker]="picker" (focus)="picker.open()" formControlName="yourControlName">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker (closed)="input.blur()"></mat-datepicker>
</mat-form-field>

angular material 2 日期选择器自动打开焦点

angular material 2 date picker auto open on focus

angular-material2

angular