Angular PrimeNG 日期时间选择器

Question

我使用 PrimeNG 5.0.1、Angular 5.1 中的组件日历，它允许选择日期和时间:

<p-calendar [(ngModel)]="startAnalyzeModel" name="startAnalyze" [showTime]="true" [dateFormat]="dateFormat" disabled="true" [locale]="ru"></p-calendar>

但是 timepicker 在重新加载页面时被卡住。每次显示选择器时是否可以更新时间值？
我还没有发现任何参数负责这个。

Answer 1

我认为您只是缺少应用中包含的很棒的字体。为了更改小时或分钟，需要单击向上或向下箭头。这些箭头是使用很棒的图标呈现的，例如:

<div class="ui-hour-picker">
  <a href="#" (click)="incrementHour($event)">
    <span class="fa fa-angle-up"></span>
  </a>
  <span [ngStyle]="{'display': currentHour < 10 ? 'inline': 'none'}">0</span>
  <span>{{currentHour}}</span>
  <a href="#" (click)="decrementHour($event)">
    <span class="fa fa-angle-down"></span>
  </a>
</div>

(Reference)

箭头类: fa fa-angle-up或 fa fa-angle-down
这是没有加载字体的样子:


请注意，分钟数显示在 <span> 内HTML 元素(不是 <input> )，因此不可编辑。

如果我加载 awesome fonts ，那么它看起来像:

Font Awesome 可能会添加到您的 .angular-cli.json 中文件下 styles部分。

我创建了一个堆栈 Blitz : https://stackblitz.com/edit/angular-7bv266?file=app%2Fapp.component.ts .

如果您的情况不是缺少很棒的字体，请更新我的 stackblitz，我会尽力提供帮助。

更新

为了在时间选择器中永久设置小时和分钟，我们可以使用 defaultDate日历的输入。在我的示例中，我将其设置为当前日期和时间 10:15，因此除非明确更改，否则它始终显示 10:15。

HTML:

<p-calendar [(ngModel)]="startAnalyzeModel" 
            [defaultDate]="defaultDate" 
            name="startAnalyze" 
            [showTime]="true" 
            [dateFormat]="dateFormat" 
            [locale]="ru"></p-calendar>

TS:

...
defaultDate = new Date();
...

constructor() {
  this.defaultDate.setHours(10);
  this.defaultDate.setMinutes(15);
}

defaultDate可以设置为任何所需的日期。

我更新了 stackblitz以及。