Bootstrap datetimepicker v4.x 12 小时时间不工作

Question

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

还有什么需要设置的吗？我正在唱 bootstrap 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，正如链接时刻文档所述，它代表 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 文本，请查看此处：

Bootstrap datetimepicker v4.x 12 小时时间不工作

Bootstrap datetimepicker v4.x 12hr time not working

bootstrap-datetimepicker

eonasdan-datetimepicker