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

Question

是否可以隐藏inputprimeng日历中的字段，并仅显示图标？我不想将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;属性添加到元素，它将隐藏，仅留下图标。有什么想法可以让我在没有输入字段的情况下渲染 html 文件吗？

Answer 1

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

\n\n

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

\n\n

样式.scss

\n\n

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

\n\n

演示 \xe2\x9a\xa1\xe2\x9a\xa1

\n\n

将此样式应用于所有组件，无需任何自定义类

\n\n

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

\n\n

\n

上面的样式适用于p-calendar所有项目。

\n

\n