dalelotts angular-bootstrap-datetimepicker 在时间选择器中显示 24 小时格式答案

【问题标题】：dalelotts angular-bootstrap-datetimepicker display 24h format in timepickerdalelotts angular-bootstrap-datetimepicker 在时间选择器中显示 24 小时格式
【发布时间】：2016-11-23 09:41:15
【问题描述】：

我正在使用 Dalelotts Datetimepicker。

DateTimePicker

我想知道是否有一种方法可以设置 dateTIMEpicker 在时间选择器中显示 24 小时而不是 AM/PM 时间..

IE：09:00 和 21:00，而不是上午 9:00 和晚上 9:00

代码如下：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script type="text/javascript" src="Scripts/angular-bootstrap-datetimepicker/src/js/datetimepicker.js"></script>
<script type="text/javascript" src="Scripts/angular-bootstrap-datetimepicker/src/js/datetimepicker.templates.js"></script>

<link rel="stylesheet" href="Scripts/angular-bootstrap-datetimepicker/src/css/datetimepicker.css" />
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">



<div class="col-lg-12 col-md-6">
  <lable class="lfInputLable">From date</lable>
  <div class="dropdown">
    <a class="dropdown-toggle" id="dropdown1" role="button" data-toggle="dropdown" data-target="#">
      <div class="input-group">
        <input type="text" class="form-control" data-ng-model="data.dateDropDownInput1" data-date-time-input="YYYY-MM-DD HH:mm"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      </div>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <datetimepicker data-ng-model="data.dateDropDownInput1" data-datetimepicker-config="{ dropdownSelector: '#dropdown1' }" />
    </ul>
  </div>
</div>

【问题讨论】：

使用 moment.js 设置本地或使用自定义格式创建一个，github.com/dalelotts/…
您能否给我一些示例或指向正确方向的指针，我不确定我是否完全理解您的评论。谢谢你回答顺便说一句:)

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

格式由 moment.js 决定 - 见https://momentjs.com/docs/#/i18n/

您可以将LT、ll 和lll 格式设置为您希望在日期/时间选择器中显示的格式。见https://github.com/dalelotts/angularjs-bootstrap-datetimepicker#hour-and-minute-formats

【讨论】：

【解决方案2】：

dale.lotts 建议的解决方案有效。只需检查您的 moment.js 是否加载了您想要的语言环境，您可以通过以下方式进行检查：console.log(moment.locales)。如果它只加载了“en”语言环境，则需要在项目中包含 moment-with-locales.js。

然后在您的代码中，您可以简单地设置您的语言环境，例如： moment.locale("de-ch"); 时间将以24小时格式显示

DateTimePicker with other locale

【讨论】：

【解决方案3】：

找到了！

在 hourModelFactory 函数内的 datetimepicker.js 文件中，我必须更改：

'display': hourMoment.format('LT'),

到：

'display': hourMoment.format('HH:mm'),

现在的另一件事是，previousViewDate 按钮显示所选时间，还充当返回选择器的按钮 - 仍然显示 AM/PM 时间..

有人有什么想法吗？

【讨论】：

选择器中的代码无需更改。立即查看文档并注意您可以创建自定义格式并将LT 和ll 格式定义为您需要的任何格式。见momentjs.com/docs/#/i18n - 和github.com/dalelotts/…
谢谢戴尔！我实际上是在摆弄 d 试图找到另一种方法，正如你所说，我创建了服装格式来定义我想要的属性。像魅力一样工作！感谢您提供出色的软件！
谢谢！我很高兴你喜欢它！

【解决方案4】：

function minuteModelFactory (milliseconds) {
    var selectedDate = moment.utc(milliseconds).startOf('hour')
    var previousViewDate = moment.utc(selectedDate).startOf('day')

    var minuteFormat = 'YYYY-MM-DD H:mm'
    var activeFormat = formatValue(ngModelController.$modelValue, minuteFormat)
    var currentFormat = moment().format(minuteFormat)

    var result = {
      'previousView': 'hour',
      'currentView': 'minute',
      'nextView': 'setTime',
      'previousViewDate': new DateObject({
        utcDateValue: previousViewDate.valueOf(),
        display: selectedDate.format('DD/MM/YYYY H:mm')
      }),
      'leftDate': new DateObject({utcDateValue: moment.utc(selectedDate).subtract(1, 'hours').valueOf()}),
      'rightDate': new DateObject({utcDateValue: moment.utc(selectedDate).add(1, 'hours').valueOf()}),
      'dates': []
    }

    var limit = 60 / configuration.minuteStep

    for (var i = 0; i < limit; i += 1) {
      var hourMoment = moment.utc(selectedDate).add(i * configuration.minuteStep, 'minute')
      var dateValue = {
        'active': hourMoment.format(minuteFormat) === activeFormat,
        'current': hourMoment.format(minuteFormat) === currentFormat,
        'display': hourMoment.format('HH:mm'),
        'utcDateValue': hourMoment.valueOf()
      }

      result.dates.push(new DateObject(dateValue))
    }

    return result
  }

显示：selectedDate.format('DD/MM/YYYY H:mm')

【讨论】：