角度材料2日期选择器自动打开焦点

时间:2017-08-25 05:02:32

标签: angular angular-material2

角度材质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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:31)

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 包含开放焦点和打开打字稿的演示

答案 1 :(得分:9)

按照@ angular / material2 v7.0.1,我已经能够通过...正确处理输入焦点。

  • (focus)="picker.open()"输入元素上添加matInput,以触发日期选择器焦点打开
  • (closed)="input.blur()"元素上添加mat-datepicker,以便一旦关闭日期选择器就可以将焦点移到输入上
<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>

答案 2 :(得分:3)

对于新的Angular&amp;材料(5及以上)它应该是这样的。 有问题的链接指向最新文档,但使用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>