Bootstrap datetimepicker 奇怪的定位完全不同 div

Question

我正在使用 bootstrap 带格式的 datetimepicker 以在我的代码中仅启用编辑时间，我是这样做的：

function setTimepicker(object){
    object.datetimepicker({
                format: 'HH:mm'
            });
}

我在 document.ready 中这样调用这个函数：

$(document).ready(function(){
   setTimepicker(starttimefield);
   setTimepicker(endtimefield);
});

我用的html是这样的：

<div class="panel-body">
    <form id="myform">
         <p> <b>Create a New Event:</b></p>                                      
         <br>
         <p>Description for main page: <br>
            <textarea id="summary" name="summary" maxlength="100"></textarea>
         </p>
         <p> Full description: <br>
            <textarea id="description" name="description" maxlength="500"></textarea>
         </p>
         <div class="wrapper">
             <div class="titles">
                 <p> Event date:  
                 </p>
                 <p> Start time:                                         
                 </p>                                        
                 <p> End time:    
                 </p>
                 </div>
                 <div class="values">
                     <input type="text" id="eventdate" readonly/><br>
                     <div id="starttimepicker">
                         <input type="text" id="starttime" onkeydown="return false"/><br>
                     </div>
                     <div id="endttimepicker">
                         <input type="text" id="endtime" onkeydown="return false"/>                                            
                     </div>
                 </div>
            </div>
            <p> Location: <input type="text" id="location"/> </p>

            <p><input type="hidden" id="userid" value="<?php echo Auth::id();?>"/></p>
            <p><input id="saveevent" type="button" value="Save Event" />
                                        </p>
     </form>
</div>

除了标准 css 文件（jquery-ui.css、bootstrap-datetimepicker.css）我添加了 1 个额外的 css 文件其中包含：

.wrapper {
    display: inline-block;
    width: auto;
    overflow: hidden;
}
.titles {
    width: 100px;
    float:left;
}
.values {
    overflow: hidden;
    margin-left: 100px;
}

现在针对手头的问题，点击字段 endtime 和 starttime 时应该有一个时间选择器（这是有效的）但是看看它在这张图片中呈现时间选择器的位置：

任何人都可以帮助我在它所属的字段旁边（或上方或附近）获取时间选择器元素

Answer 1

您缺少位置值为 "relative" 的 .input-group 包装器。由于日期选择器是绝对定位的，因此它的容器需要相对定位才能正确定位日期选择器。

所以我相信这样的事情会奏效：

.values {
    position: relative;
    overflow: hidden;
    margin-left: 100px;
}

更好的是，让我们在实际保存输入的 div 上设置相对位置，如下所示：

#starttimepicker {
  position: relative;
}

#endtimepicker {
  position: relative;
}

如果你想要我的意见，虽然这不是很干。如果您可以控制 html，您可以尝试将 class 或 "values__datepicker"（或任何 class）添加到 #starttimepicker 和 #endtimepicker 并仅设置一个 CSS 规则如下：

.values__datepicker {
  position: relative;
}

Bootstrap datetimepicker 奇怪的定位完全不同 div

Bootstrap datetimepicker strange positioning on a different div altogether

html

javascript

css

jquery

bootstrap-datetimepicker