如何让bootstrap-ui-datetime-picker选择器直接显示24小时格式？

嘿，这个问题很好解决！你只需要给datetime-picker控件添加一个picker-options属性，把showMeridian设为false，就能让选择器界面直接显示24小时格式，不再出现AM/PM的选项啦。

修改后的HTML代码 #

<div class="form-group">
      <label class="col-sm-2 control-label">Both</label>
      <div class="col-sm-10">
        <p class="input-group">
            <input type="text" class="form-control" 
                   datetime-picker="MM/dd/yyyy HH:mm" 
                   ng-model="ctrl.date.value" 
                   is-open="ctrl.date.showFlag"
                   picker-options="{ showMeridian: false }"/> <!-- 新增这行配置 -->
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="ctrl.date.showFlag = true"><i class="fa fa-calendar"></i></button>
            </span>
        </p>
      </div>
    </div>

为啥这么改？ #

这个插件的时间选择器默认是开启12小时制的（showMeridian默认值为true），把它设为false之后，就会强制切换到24小时制的界面展示——刚好你的输入框已经用了HH:mm这种24小时制的格式，这样选择器界面和输入框显示就完全统一了。

你的控制器代码不需要修改，保持原来的即可：

app.controller('MyController', ['$scope', function($scope) {

var that = this;

this.date = {
value: new Date(),
showFlag: false
};

this.openCalendar = function(e, date) {
  that.open[date] = true;
};

}]);

这样调整之后，时间选择器的小时选项就会显示0到23的数值，再也不用切换上午下午了，完美符合你的需求~

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