title: How do I remove the Clear button from p-calendar?
body: <p>I'm implementing PrimeNG's <code>p-calendar</code> in an Angular application and I'm using the <code>showButtonBar</code> property.  I need the <code>Today</code> button to show, but I do not want the <code>Clear</code> button.</p>
  
  <p>I'm not having any luck using <code>clearButtonStyleClass</code> in conjunction with a CSS class to just hide the button directly.</p>
  
  <p>Here's my implementation:</p>
  
  <pre><code>`&lt;p-calendar
  [style]="{'width': '100%'}"
  [inputStyle]="{'width': '100%', 'border': 'none', 'cursor': 'pointer'}"
  [(ngModel)]="calendarDate"
  [inline]="false"
  dateFormat="DD, MM d, yy"
  (onSelect)="calendarPickDate($event)"
  [showIcon]="false"
  [showButtonBar]="true"
  (onTodayClick)="returnToTodaysDate()"
  (onClearClick)="returnToTodaysDate()"
  [clearButtonStyleClass]="'clear-button'"
  [readonlyInput]="true"
  &lt;/p-calendar&gt;`
  </code></pre>
  
  <p>In my CSS for that Angular component, <code>clear-button</code> is as follows:</p>
  
  <pre><code>    .clear-button { display: none; }
  </code></pre>
  
  <p>I also don't get any traction by trying this syntax on the class property for the <code>Clear</code> button:</p>
  
  <pre><code>    clearButtonStyleClass="clear-button"
  </code></pre>