使用锚点单击显示 MatCalendar [英] Display MatCalendar using an anchor click

问题描述

如何使用锚元素打开 Material Calendar 组件?我几乎做到了，但日历总是在页面的左上角打开:

 
<mat-calendar class="隐藏"><input matInput [matDatepicker]="picker"/><mat-datepicker #picker></mat-datepicker></mat-calendar><a (click)="picker.open()"><i class="zmdi zmdi-calendar"></i></a>

解决方案

经过一番头痛，我找到了解决方案:

 
<div class="隐藏控件"><mat-form-field><input matInput [matDatepicker]="picker" (dateChange)="scheduleDateChange($event)"/><mat-datepicker #picker></mat-datepicker></mat-form-field>

<a (click)="picker.open()"><i class="zmdi zmdi-calendar text-white"></i></a>

隐藏控件类如下:

.hidden-control {宽度:0；高度:0；填充:0；边距:0；边界:无；可见性:隐藏；}

结果:

how do I open a Material Calendar component using an anchor element? I almost did, but the calendar always opens in top left corner of the page:

    <li>
      <mat-calendar class="hidden">
        <input matInput [matDatepicker]="picker" />
        <mat-datepicker #picker></mat-datepicker>
      </mat-calendar>
      <a (click)="picker.open()">
          <i class="zmdi zmdi-calendar"></i>
      </a>
    </li>

解决方案

After some headache, I got a solution for this:

    <li>
      <div class="hidden-control">
        <mat-form-field>
          <input matInput [matDatepicker]="picker" (dateChange)="scheduleDateChange($event)" />
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
      </div>
      <a (click)="picker.open()">
          <i class="zmdi zmdi-calendar text-white"></i>
      </a>
    </li>

the hidden-control class is like below:

.hidden-control  {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  visibility: hidden;
}

The result:

这篇关于使用锚点单击显示 MatCalendar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！