css - 是否可以隐藏 Primeng 日历中的输入字段？

Question

是否可以在 primeng 日历中隐藏 input 字段，只显示图标？我不想将 p-calendar 元素更改为内联，而是只显示将弹出日历的图标。

组件.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>

我尝试了以下方法，但没有成功:

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

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

但是，如果我将 display: none; 属性添加到元素，使用浏览器中的 devtools，它将隐藏，只留下图标。有什么想法可以让我在没有输入字段的情况下呈现 html 文件吗？

Answer 1

您只需要为 p-calendar 组件创建自定义样式

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

样式.scss

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

demo ⚡⚡

将此样式应用于没有任何客户类的所有组件

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.