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

Posted 2023-03-06

【中文标题】是否可以隐藏 Primeng 日历中的输入字段？

【英文标题】：is it possible to hide the Input field in the Primeng Calendar?

【发布时间】：2020-01-10 06:43:31

【问题描述】：

是否可以在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;

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

【问题讨论】：

检查样式部分是否有组件 ex。 ui-inputtext 类，你可以覆盖angular的全局样式文件中的casses

谢谢，你能解释一下吗？

嗨@chris，如果这个或任何答案已经解决了您的问题，请考虑接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。 ??????

嗨@malbarmawi！我刚刚接受了您的回答，感谢您的解决方案；）我最终为日历使用了另一个库，但我尝试实施您的解决方案以仔细检查它在我的项目中是否也有效。谢谢！

【参考方案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>

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。

【参考方案2】：

我认为如果您为 input 设置 display none ，用户在点击时看不到日历，但您可以使用此 css 代码进行输入并将您的图标显示为 background-image 中的图像。

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;

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

【讨论】：

这个！！谢谢！！接受的答案对我不起作用，所以我做了这个解决方案，但做了一些修改：:host ::ng-deep .p-inputtext border: none;颜色：透明；文字阴影：0 0 0 #fff;光标：指针；宽度：0！重要；高度：0！重要；填充：0！重要；

还将“outline: 0”替换为“box-shadow: none !important;”，因为 box-shadow 是导致所有 PrimeNG 元素 onFocus 上的轮廓的属性