Ionic6+Angular中ion-datetime强制显示日期选择器的解决办法

问题场景 #

使用Ionic 6搭配Angular开发时，需要实现一个仅选择时间（无需日期）的秒表时间选择器。从Ionic v4（@ionic/core@4.7.4）官方示例复制的代码在v6项目中失效，始终显示带日历的日期选择器，格式设置无效果：

<ion-content [fullscreen]="true">
  <ion-list>
    <ion-item>
      <ion-label>Start Time</ion-label>
      <ion-datetime display-format="h:mm A" picker-format="h:mm A" value="1990-02-19T07:43Z"></ion-datetime>
    </ion-item>
  </ion-list>
</ion-content>

解决方法 #

Ionic 5及后续版本（含v6）重构了ion-datetime的API，原v4的*display-format和picker-format*属性已被废弃，需改用新属性实现纯时间选择：

• presentation="time"：强制渲染时间选择器面板，屏蔽日期选择组件
• format：替代原display-format，定义选中时间的展示格式

修改后的有效代码：

<ion-content [fullscreen]="true">
  <ion-list>
    <ion-item>
      <ion-label>Start Time</ion-label>
      <ion-datetime 
        format="h:mm A" 
        presentation="time" 
        value="1990-02-19T07:43Z">
      </ion-datetime>
    </ion-item>
  </ion-list>
</ion-content>

扩展配置 #

• 若需包含秒数，可调整为format="h:mm:ss A"，presentation保持time即可
• 限制可选时间范围可添加min和max属性，例如min="00:00" max="23:59"

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