Bootstrap DateTime Picker 未正确显示其在屏幕上的隐藏

Question

如何在屏幕上显示完整的日期时间选择器。我试过position:relative 但没有用。请帮我.. HTML 代码：

<div style="position:relative">
<div class="input-group date form_startdatetime" data-date-format="dd M yyyy - HH:ii P" data-link-field="dtp_startdate">
     <input class="form-control" size="16" type="text" name="sDateTime" tabindex="7">
</div>
</div>
<script type="text/javascript" src="./datetimepicker3/jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./datetimepicker3/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./datetimepicker3/datetimepicker/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript">
$('.form_startdatetime').datetimepicker({
    //language:  'fr',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1

});
</script>

查看输出图片..

Answer 1

根据您的评论，我在文档中看到了这一点。

pickerPosition

字符串。 默认：'bottom-right'（支持的其他值：'bottom-left'）

此选项目前仅在组件实现中可用。有了它，您可以将选择器放在输入字段下方。

为了更好地理解定位，我添加了一个示例。

<div class="input-append date form_datetime">
    <input size="16" type="text" value="" readonly>
    <span class="add-on"><i class="icon-th"></i></span>
</div>
 
<script type="text/javascript">
    $(".form_datetime").datetimepicker({
        format: "dd MM yyyy - hh:ii",
        autoclose: true,
        todayBtn: true,
        pickerPosition: "bottom-left"
    });
</script>