is it possible to hide the Input field in the Primeng Calendar?

Question

Is it possible to hide the input field in the primeng calendar, and show only the icon? I don't want to change the p-calendar element to inline, but just display the icon that will pop up the calendar.

component.html

<div class="ui-g-12 ui-md-4">
  <p-calendar class="foo-cal" appendTo="body" readonlyInput="true" dateFormat="yy/mm/dd" [(ngModel)]="date" [showIcon]="true"></p-calendar>
</div>

I tried the following, but no success:

body .ui-calendar.ui-calendar-w-btn .ui-inputtext {
    display: none !important;
}

p-calendar span input {
    display: none !important;
}

However, with the devtools in the browser if I add the display: none; property to the element, it will hide leaving the icon only. Any ideas how can I make this to render the html file without the input field?

Answer 1

You just need to create a custom style for the p-calendar component

<div class="ui-g-12 ui-md-4">
  <h3>Icon</h3>
  <p-calendar styleClass="only-icon" [(ngModel)]="date" [showIcon]="true"></p-calendar>
</div>

style.scss

.only-icon {
 .ui-inputtext{
   display: none;
 }
 button.ui-datepicker-trigger.ui-calendar-button  {
   border-radius: 4px !important;
 }
}

demo ⚡⚡

apply this style to all componnt without any custome class

p-calendar {
 .ui-inputtext{
   display: none;
 }
 button.ui-datepicker-trigger.ui-calendar-button  {
   border-radius: 4px !important;
 }
}

the style above gone to apply to a p-calendar to all project.