如何让Bootstrap DateTimePicker显示在输入框正下方？

问题描述 #

在引用Bootstrap DateTimePicker的HTML页面中，点击输入框时日历会显示在页面底部，需要调整为显示在输入框正下方。

解决方法 #

Bootstrap DateTimePicker提供了widgetPositioning配置项，用于控制选择器的显示位置。只需在初始化组件时添加该配置，指定垂直方向为bottom、水平方向为left，即可让日历精准显示在输入框的正下方。

输入框父元素的浮动布局（如原代码中的float:left）不会影响该定位逻辑，配置后选择器会自动基于输入框的位置进行定位。

修改后的完整代码 #

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>     
    <!-- datetime picker -->
    <!-- Include Bootstrap CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Include Moment.js CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>

<!-- Include Bootstrap DateTimePicker CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div style="margin:100px">
    <div style="margin-bottom: 3em;">
        <div style="float:left; margin-right: 5em;">
            <label id="startDateTimeLabel">Start DateTime</label>
            <input class="form-control"
            type="text" id="startDateTime" style="width:200px"/>
        </div>
        
        <div>
            <label id="endTimeLabel">End DateTime</label>
            <input class="form-control"
            type="text" id="endDateTime" style="width:200px"/>
        </div>
    </div>
</div>
<script>
$("#startDateTime").datetimepicker({
    format: 'MM/DD/YYYY HH:mm:ss',
    defaultDate: new Date(),
    widgetPositioning: {
        vertical: 'bottom',
        horizontal: 'left'
    }             
});
$("#endDateTime").datetimepicker({
    format: 'MM/DD/YYYY HH:mm:ss',
    defaultDate: new Date(),
    widgetPositioning: {
        vertical: 'bottom',
        horizontal: 'left'
    }
});
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者SoftwareDveloper