Bootstrap DateTime Picker无法正确显示其在屏幕上的隐藏 [英] Bootstrap DateTime Picker not Showing properly its hiding by screen

问题描述

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

How to display full datetime picker in the screen. I tried position:relative but not working. Please help me.. HTML code :

<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>

查看输出图片。

推荐答案

从您的评论中，我会在文档中看到这一点。

From Your comment, I see this in the documentation.

字符串。 默认：右下

String. Default: 'bottom-right' (other value supported : 'bottom-left')

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

This option is currently only available in the component implementation. With it, you can place the picker just under the input field.

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

I am adding a sample example for better understanding of Positioning.

<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> 

这篇关于Bootstrap DateTime Picker无法正确显示其在屏幕上的隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！