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

本文介绍了角度材料 2 日期选择器自动打开焦点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何将angular material 2 日期选择器配置为在焦点上自动打开?我在 https://material.angular.io/components/datepicker 的文档中没有找到任何内容/概览.

How angular material 2 date picker can be configured to be opened automatically on focus? I didn't find anything in the documentation at https://material.angular.io/components/datepicker/overview.

当前的html是这样的:

Current html is like this:

 <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>

推荐答案

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

mdDatepicker provides method open() in order to open it manually doe developers. You can invoke it at md-input's focus event. See 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>

演示(包含用于打开焦点和在打字稿中打开的演示)

这篇关于角度材料 2 日期选择器自动打开焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！