Hide clear button from p-calendar primeng

Issue

Hello guys I'm using PrimeNg with the module p-calendar. My calendar is showing two buttons named Today and Clear. My problem is I want to show only one button but not both.The button that I don't want to show is the clear button and keep visible the other one.

There's any way to hide the button because primeng don't give the possibility to hide only one.

The html generated inside the p-calendar is large to put all the html code here. But this is the html code of the button.

<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>

And the css code:

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

Thank you very much.

Solution

You have to add ::ng-deep before your CSS As, you want to change the style from library component

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

Or you can put that in your main style.css/style.scss file

Answered By - Kinjal