PrimeNG TimeOnly 日历：无法直观地 Select 默认时间

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 AM

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

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

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

目前正在使用 PrimeNG 8 和 Angular 8.

提前致谢。

Answer 1

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

  <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;
}

PrimeNG TimeOnly 日历：无法直观地 Select 默认时间

PrimeNG TimeOnly Calendar: Cannot Select default time intuitively

primeng

angular

primeng-calendar