如何配置ng-pick-datetime选择器以显示24小时制时间？

我之前也碰到过这个情况，其实只要调整一下选择器的格式配置就能彻底解决！核心就是明确指定24小时制的显示规则，下面给你两种实用的配置方式：

1. 单个组件单独配置 #

在使用owl-date-time的模板里，直接通过inputFormat属性设置24小时制的格式字符串：

<owl-date-time [(ngModel)]="selectedTime" inputFormat="HH:mm"></owl-date-time>

这里的HH代表24小时制的小时（范围00-23），mm是分钟，设置后选中时间就会固定显示成15:00这类格式，不会再切换回12小时制。

2. 全局统一配置（多组件场景更高效） #

如果项目里多个地方都用到这个选择器，不想逐个设置，可以在模块里全局配置格式规则：

import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_FORMATS } from 'ng-pick-datetime';

// 自定义24小时制格式规则
export const MY_CUSTOM_FORMATS = {
  parseInput: 'HH:mm',
  fullPickerInput: 'HH:mm',
  datePickerInput: 'YYYY-MM-DD',
  timePickerInput: 'HH:mm',
  monthYearLabel: 'MMM YYYY',
  dateA11yLabel: 'LL',
  monthYearA11yLabel: 'MMMM YYYY'
};

@NgModule({
  imports: [OwlDateTimeModule, OwlNativeDateTimeModule],
  providers: [
    { provide: OWL_DATE_TIME_FORMATS, useValue: MY_CUSTOM_FORMATS }
  ]
})
export class YourModule { }

这样所有owl-date-time组件都会默认使用24小时制显示，不用再重复设置。

小提醒 #

• 一定要确保已经导入了OwlNativeDateTimeModule，它是处理日期时间格式化的依赖模块，少了它格式配置可能不生效
• 如果只需要选择时间（不需要日期），可以搭配owl-time-picker组件使用，上面的格式配置同样适用

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