angular - PrimeNG TimeOnly 日历：无法直观地选择默认时间

Question

我正在使用这个 PrimeNG timeonly 日历：

    <p-calendar  id="startHour" name="startHour" [defaultDate]="startHourDefault"  [(ngModel)]="startHourValue" [timeOnly]="true" hourFormat="12" [inline]="false" 
placeholder="Select start hour"  [disabled]="IsDisabled"></p-calendar>

我将开始默认时间设置为上午 9:00

var today = new Date();
    this.startHourDefault= new Date(today.getFullYear(), today.getMonth(), today.getDate(), 9, 0, 0);

现在，当我打开小部件时，我无法选择上午 9:00。要么我必须选择胡萝卜来选择 9:01，然后再次回到上午 09:00。这看起来不是很直观。

有没有办法点击下面的框（以红色框突出显示）来选择时间

目前使用 PrimeNG 8 和 Angular 8。

提前致谢。

Answer 1

经过这么多天的调查。我看不到 PrimeNG 社区提供的任何解决方案。这种情况的最佳解决方法是在用户单击文本框时设置默认日期。为此，PrimeNG 提供 onFocus 事件。在这样的模板集中：

  <p-calendar  id="startHour" name="startHour" [defaultDate]="startHourDefault"  [(ngModel)]="startHourValue" [timeOnly]="true" hourFormat="12" (onFocus)="selectDefaultDate()" [inline]="false" 
placeholder="Select start hour"  [disabled]="IsDisabled" ></p-calendar>

在组件中设置默认时间。

selectDefaultDate(){
if(!this.startHourValue)
this.startHourValue=this.defaultDate;
}