PrimeNG <p-calendar>组件如何配置hh.mm格式输入11.53？

直接设置dateFormat="hh.mm"后输入11.53值留不住，是因为组件默认的解析逻辑不识别点号分隔的时间格式，可以通过以下方式实现：

方案一：使用parseFormat指定解析格式 #

PrimeNG的Calendar组件提供了parseFormat属性，用来定义用户输入文本的解析规则，配合dateFormat控制显示格式，就能让点号分隔的时间正常生效。

示例代码：

<p-calendar 
  [(ngModel)]="selectedTime" 
  dateFormat="hh.mm" 
  parseFormat="hh.mm"
  [showTime]="true" 
  [showDate]="false"
></p-calendar>

• dateFormat="hh.mm"：设置输入框最终显示的时间格式为点号分隔
• parseFormat="hh.mm"：告诉组件按照hh.mm的规则解析用户输入的内容，这样输入11.53就能被正确转换成时间对象并保留在输入框中

方案二：自定义输入解析逻辑（复杂场景适用） #

如果需要支持多种输入格式（比如同时兼容hh:mm和hh.mm），可以通过input事件手动处理解析：

组件类代码：

selectedTime: Date | undefined;

handleInput(event: Event) {
  const inputElement = event.target as HTMLInputElement;
  const inputValue = inputElement.value.trim();
  if (!inputValue) return;

  // 处理点号分隔的时间
  if (inputValue.includes('.')) {
    const [hours, minutes] = inputValue.split('.');
    if (!isNaN(+hours) && !isNaN(+minutes)) {
      const time = new Date();
      time.setHours(+hours);
      time.setMinutes(+minutes);
      this.selectedTime = time;
    }
  }
}

模板代码：

<p-calendar 
  [(ngModel)]="selectedTime" 
  dateFormat="hh.mm" 
  [showTime]="true" 
  [showDate]="false"
  (input)="handleInput($event)"
></p-calendar>

内容的提问来源于stack exchange，提问作者sander