css - 如何在垫日历中隐藏顶部按钮

Question

我有一个月历，但是当我点击顶部按钮时，它会显示年、月和日，我怎么能隐藏那个按钮或告诉日历不显示天数呢

look image

我在考虑隐藏该元素的 css 类，最好的方法是什么？

这是html

<button cdkarialive="polite" class="mat-calendar-period-button mat-button _mat-animation-noopable" mat-button="" type="button" ng-reflect-politeness="polite" aria-label="Choose month and year"><span class="mat-button-wrapper">JUL. 2019<div class="mat-calendar-arrow"></div></span>
    <div class="mat-button-ripple mat-ripple" matripple="" ng-reflect-centered="false" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div>
    <div class="mat-button-focus-overlay"></div>
</button>

在这里你可以检查这个问题

https://stackblitz.com/edit/angular-wtbblu

Answer 1

在你的情况下你可以简单地使用

.example-month-picker .mat-calendar-arrow {
    display: none;
}

但请记住，对话框在叠加层中呈现(而不是作为组件的子项)，因此您必须在组件外部定义此 css。在提供的 stackblitz 示例中，它可以是 styles.css。

更新的演示:

https://stackblitz.com/edit/angular-wtbblu-xzzk5x?file=styles.css