bootstrap-ui-datetime-picker 更改为 24 小时格式

Question

我在我的 angularjs 应用程序中使用 bootstrap-ui-datetime-picker。但我无法在时间选择器中获得 24 小时格式。在我选择 6:00 PM 结果后，我得到 18:00 h。这没关系，但我也需要直接在选择器中。 这是代码

<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"/>
            <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>

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;
};

}]);

工作 plnkr 有同样的问题 谢谢

Answer 1

您需要将配置对象解析为timepicker-options 属性并设置showMeridian: false。这将禁用 AM/PM 模式并启用 24 小时模式。

查看

<div ng-controller="MyCtrl as ctrl">
  <input type="text" 
         class="form-control" 
         datetime-picker="MM/dd/yyyy HH:mm" 
         timepicker-options="ctrl.datePickerOptions"
         ng-model="ctrl.date.value" is-open="ctrl.date.showFlag" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="ctrl.date.showFlag = true">
      Open picker
    </button>
  </span>
</div>

AngularJS 应用程序

var myApp = angular.module('myApp', ['ui.bootstrap', 'ui.bootstrap.datetimepicker']);

myApp.controller('MyCtrl', function($scope) {
  var that = this;

  this.datePickerOptions = {
    showMeridian: false
  }

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

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

> demo fiddle