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

Question

我在 angularjs 应用程序中使用 bootstrap-ui-datetime-picker。但我无法在时间选择器中获得 24 小时格式。在我 select 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 模式并启用 24h 模式。

查看

<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