文章/答案/技术大牛

发布

社区首页 >问答首页 >在DatePicker上按一下角质材质MatSelect，然后选择选定的日期

问在DatePicker上按一下角质材质MatSelect，然后选择选定的日期
EN

Stack Overflow用户

提问于 2018-04-02 07:30:32

回答 1查看 5.6K关注 0票数 1

当我点击角度垫-选择控件时，我试图使材料数据报警器自动打开。

<mat-select formControlName="postDate" (focus)="openCalendar(picker)" (click)="openCalendar(picker)">
  <mat-option value="8555"><i>Delay Crew - 8555</i></mat-option>
  <mat-option value="9000"><i>Self Install - 9000</i></mat-option>
  <mat-option>
    <mat-input-container>
      <input matInput [matDatepicker]="picker">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-input-container>
  </mat-option>
</mat-select>

我试着用焦点和点击事件的垫-选择控制这种方式，它不工作。

openCalendar(datePicker: MatDatepicker<Date>) {
    datePicker.open();
}

也可以有人帮助选择，选择日期应该有该日期作为选择的选项，在垫-选择控件。

angular

angular-material

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-04-02 10:15:51

要在单击DatePicker元素时自动打开select，可以修改html如下所示：

<mat-select formControlName="postDate" (click)="picker.open()">
    <mat-option value="8555"><i>Delay Crew - 8555</i></mat-option>
    <mat-option value="9000"><i>Self Install - 9000</i></mat-option>
    <mat-option>
        <mat-input-container>
            <input matInput [matDatepicker]="picker">
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
        </mat-input-container>
    </mat-option>
</mat-select>

这是可行的，但是日历是在错误的位置打开的，因为元素是在调用open()方法之后移动的。我可能会考虑重新排列元素，这样您就不必处理这个问题(即将datePicker移到select之外，并将其与其并排放置)。

编辑

再考虑一下，当select元素发出onOpen事件时，您可以调用onOpen，这将解决定位问题。

<mat-select formControlName="postDate" (onOpen)="picker.open()">
    <mat-option value="8555"><i>Delay Crew - 8555</i></mat-option>
    <mat-option value="9000"><i>Self Install - 9000</i></mat-option>
    <mat-option>
        <mat-input-container>
            <input matInput [matDatepicker]="picker">
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
        </mat-input-container>
    </mat-option>
</mat-select>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49607092

复制

相似问题

问在DatePicker上按一下角质材质MatSelect，然后选择选定的日期
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在DatePicker上按一下角质材质MatSelect，然后选择选定的日期EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在DatePicker上按一下角质材质MatSelect，然后选择选定的日期
EN