隐藏 p-calendar primeng 中的清除按钮

Question

大家好，我正在使用带有模块 p-calendar 的 PrimeNg。我的日历显示两个按钮，名为“今天”和“清除”。我的问题是我只想显示一个按钮而不是 both.The 我不想显示的按钮是清除按钮并保持另一个按钮可见。

有任何方法可以隐藏按钮，因为 primeng 不提供仅隐藏一个按钮的可能性。

p-calendar里面生成的html很大，把所有的html代码放在这里。但这是按钮的 html 代码。

<div class="ui-datepicker-buttonbar ui-widget-header ng-tns-c10-7 ng-star-inserted" style="">
    <div class="ui-g">
        <div class="ui-g-6">
            <button class="ng-tns-c10-7 ui-button-secondary ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" pbutton="" type="button" ng-reflect-ng-class="ui-button-secondary" ng-reflect-label="Today"><span class="ui-button-text ui-clickable">Today</span></button>
        </div>
        <div class="ui-g-6">
            <button class="ng-tns-c10-7 ui-button-secondary ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" pbutton="" type="button" ng-reflect-ng-class="ui-button-secondary" ng-reflect-label="Clear"><span class="ui-button-text ui-clickable">Clear</span></button>
        </div>
    </div>
</div>

和 css 代码：

.ui-datepicker-buttonbar > div.ui-g div:last-child {
    display: none;
}

非常感谢。

Answer 1

你必须在 CSS 之前添加 ::ng-deep 因为你想从库组件

更改样式

::ng-deep.ui-datepicker-buttonbar > div.ui-g div:last-child {
    display: none;
}

或者你可以把它放在你的主样式中。css/style.scss 文件

隐藏 p-calendar primeng 中的清除按钮

Hide clear button from p-calendar primeng

primeng

angular