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;

属性添加到元素，它将隐藏，仅留下图标。有什么想法可以让我在没有输入字段的情况下渲染 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;
 }
}

演示⚡⚡

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

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

上面的样式适用于

p-calendar

到所有项目。

Answer 2

我认为如果您为输入设置不显示，用户在单击那里时将看不到日历，但您可以使用此CSS代码进行输入并将您的图标显示为背景图像中的图像。

input{
    border: none;
    background-image: url(your-icon-address);
    color: transparent;
    text-shadow: 0 0 0 #fff;
    cursor:pointer;
    /*width:somthing; if you need*/
    /*height:somthing; if you need*/
}
input:focus{
    outline:0;
}

您可以设置与图标相同的宽度和高度输入。

Answer 3

对我来说，用 css“隐藏”输入元素就完成了这项工作：

p-calendar > span > input { display: none; }