引导日期时间选择器 v4.x 12 小时时间不起作用

Question

我一直在尝试让引导程序 v4.17.47 的日期时间选择器工作无济于事。 当我设置format时，我只有 24 小时零分钟，我似乎无法获得 12 小时的工作时间。

还有其他需要设置的地方吗？我唱的是引导程序v3.3.2和jQuery v2.2.3。

<div class="form-group">
<div class='input-group date' id='TheTime'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>

在我设置的 JavaScript 下方，但我没有得到 12 小时的弹出窗口。通过下面的设置，我得到一个弹出窗口，该弹出窗口转到 24 小时，但时间文本框中显示的是例如：弹出窗口显示21:00，但文本框显示9:00 tt。

<script type="text/javascript">
$(document).ready(function ($) {
$('#TheTime').datetimepicker({
format: 'hh:mm tt'
});                        
});
</script>

Answer 1

您必须更改format选项的值才能获得 12 小时的弹出窗口，只需添加一个a，作为链接的时刻 docs 状态表示am/pm字符串。

这里有一个工作示例：

$(document).ready(function ($) {
$('#TheTime').datetimepicker({
format: 'hh:mm a'
});                        
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<div class="form-group">
<div class='input-group date' id='TheTime'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>

如果必须在输入字段中显示tt文本，请查看此处：

• 将自定义文本添加到引导日期时间选择器中的输出文本字段
• 如何在引导程序 3 日期/时间选择器小部件中仅使用时间选择器，并添加格式的字符串