![Material Material](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了使用锚点单击显示 MatCalendar的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何使用锚元素打开 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!