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

vwhgwdsa 于 12个月前发布在其他

关注(0)|答案(3)|浏览(81)

有没有可能在primeng日历中隐藏input字段，只显示图标？我不想将p-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>

字符串
我尝试了以下方法，但没有成功：

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

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

型
然而，在浏览器中的devtools中，如果我将display: none;属性添加到元素中，它将隐藏，只留下图标。有什么想法吗？

css

来源：https://stackoverflow.com/questions/57838079/is-it-possible-to-hide-the-input-field-in-the-primeng-calendar

3条答案

按热度按时间

lfapxunr1#

只需为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>

字符串
style.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;
 }
}

型
上面样式将应用于p-calendar的所有项目。

赞(0）回复(0）举报 12个月前

yacmzcpb2#

我认为如果你设置输入为无显示，用户在点击那里时看不到日历，但你可以使用这个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;
}

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

赞(0）回复(0）举报 12个月前

3qpi33ja3#

对我来说，用css“隐藏”input元素就完成了这项工作：
第一个月

赞(0）回复(0）举报 12个月前