【问题标题】:PrimeNG TimeOnly Calendar: Cannot Select default time intuitivelyPrimeNG TimeOnly 日历:无法直观地选择默认时间
【发布时间】:2020-04-15 20:00:55
【问题描述】:

我正在使用这个 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。

提前致谢。

【问题讨论】:

    标签: angular primeng primeng-calendar


    【解决方案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;
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-04-10
      • 1970-01-01
      • 2018-06-09
      • 1970-01-01
      • 2013-01-05
      • 2021-10-29
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多