ui-bootstrap datetime-picker 将 show-meridian 定义为 false

Question

我正在使用 ui-bootstrap-datetime-picker 和 angularJS。我想知道是否可以直接在 timepickerOptions 中设置时间选择器的显示子午线选项？

  ...  
  <input type="text" class="form-control" 
       datetime-picker="MM/dd/yyyy HH:mm"
       timepickerOptions="{'show-meridian': 'false'}"
       ng-model="ctrl.date.value" 
       is-open="ctrl.date.showFlag"/>
  <span class="input-group-btn"></span>
...

这是说明问题的plnkr。

Answer 1

问题的根本原因是命名风格错误。为了使您的代码正常工作，您必须将驼峰式大小写更改为破折号分隔：timepicker-options 而不是 timepickerOptions（请参阅我的 forked plunker）：

<input type="text" class="form-control" 
   datetime-picker="MM/dd/yyyy HH:mm"
   timepicker-options="{'show-meridian': false}"
   ng-model="ctrl.date.value" 
   is-open="ctrl.date.showFlag"/>

这里的关键点是 normalization process 由 AngularJS 完成。由于 HTML 不区分大小写，因此 AngularJS 无法将名为 timepickerOptions 的 HTML 属性转换为范围变量 timepickerOptions - 因为 timepickerOptions 在 HTML 被 AngularJS 看到与 timepickeroptions 完全一样；所以，它没有机会确定如何规范化这个名字。因此，在使用 HTML.

时，您应该始终使用 -、_ 或 : 来分隔指令名称中的不同单词

ui-bootstrap datetime-picker 将 show-meridian 定义为 false

ui-bootstrap datetime-picker define show-meridian to false

html

angularjs

twitter-bootstrap-3

bootstrap-datetimepicker