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

【问题标题】：ui-bootstrap datetime-picker define show-meridian to falseui-bootstrap datetime-picker 将 show-meridian 定义为 false
【发布时间】：2019-03-17 16:19:17
【问题描述】：

我将 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。

【问题讨论】：

标签： html angularjs twitter-bootstrap-3 bootstrap-datetimepicker

【解决方案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 - 因为 AngularJS 看到 HTML 中的 timepickerOptions 与 timepickeroptions 完全相同；因此，它没有机会确定如何规范化这个名称。因此，在使用 HTML 时，您应该始终使用 -、_ 或 : 来分隔指令名称中的不同单词。

【讨论】：