单击图标打开日历

Question

大家好，我正在使用 primeNg 的 p-calendar 组件，我想知道是否可以删除显示为打开日历的输入，而不是仅添加一个图标来代替此输入。我的意思是，当我在图标上方单击时，日历应该出现，但当我将鼠标放在输入中时不会出现，因为我不希望 primeNg 默认添加的输入。

我不知道这是否可能。非常感谢。

Answer 1

有 inputStyle 和 icon 属性，您可以在其中设置宽度和样式。

     <p-calendar [inputStyle]="{'width':'0px', 'border':'0'}" 
[showIcon]="true" icon="fa fa-user"></p-calendar>

在此处查看属性参考 https://www.primefaces.org/primeng/#/calendar

Answer 2

尝试在您的代码中使用 [showOnFocus]="false"。

Answer 3

是的，这是可能的。隐藏您的 p-calendar 组件。请参考下文。

In HTML file

<button pButton type="button" (click)="openCalendar($event)" label="Open Calendar"></button>
       <p-calendar
          #calendar
          [hidden]="true"
          [(ngModel)]="selectedDate"
          [readonlyInput]="true"
          appendTo="body"
        ></p-calendar>

在 TS 文件中。

   import { Calendar } from "primeng/primeng";

   @ViewChild("calendar", { static: false }) private calendar: Calendar;

   openCalendar(event: any) {
     this.calendar.showOverlay();
     event.stopPropagation();
   }

单击图标打开日历

On click Icon Open Calendar

calendar

primeng

angular