angular-moment-picker时间选择器无法切换为12小时制求助

我之前也踩过这个坑，angular-moment-picker的选择器视图时间模式和输入框显示格式是分开配置的，你当前的问题在于只设置了输入框的显示格式，但没开启选择器本身的12小时制视图模式。下面是具体的解决步骤：

问题根源 #

你在全局配置里设置了minutesFormat: 'hh:mm'，但这个选项仅控制分钟选择面板的显示格式；而要让小时选择面板切换为12小时制，必须开启meridian选项（默认是false，强制24小时制），同时配合正确的小时格式配置。

解决方案 #

1. 全局配置修正（推荐） #

修改你的全局配置函数，添加meridian: true并修正小时/分钟格式：

angular.module('你的应用模块名', ['moment-picker'])
  .config(function(momentPickerProvider) {
    momentPickerProvider.options({
      meridian: true, // 开启AM/PM显示，启用12小时制视图的核心开关
      hoursFormat: 'hh', // 小时面板用12小时制格式（小写hh对应12小时制）
      minutesFormat: 'mm' // 分钟面板仅显示分钟即可
    });
  });

2. 单个选择器单独配置（无需全局修改） #

如果不想全局生效，也可以直接在HTML的picker指令上添加属性：

<div class="input-group" moment-picker="ctrl.timepicker" format="hh:mm a" meridian="true" hours-format="hh">
  <span class="input-group-addon">
    <i class="far fa-clock"></i>
  </span>
  <input class="form-control" placeholder="Select a time" ng-model="ctrl.timepicker" ng-model-options="{ updateOn: 'blur' }">
</div>

关键说明 #

• meridian: true是核心：这个选项决定选择器是否显示AM/PM切换按钮，同时强制小时面板使用12小时制（0-11）。
• 格式区分：hh代表12小时制（带前导零），HH代表24小时制；输入框的format="hh:mm a"里的a用来显示AM/PM标识，这个你已经设置正确了。
• 全局配置会作用于所有picker，单个配置优先级高于全局。

这样修改后，选择器的视图就会切换为12小时制，同时输入框也会正确显示带AM/PM的时间格式。

内容的提问来源于stack exchange，提问作者code.cycling