Javascript Bootstrap datetimepicker完全位于不同的div上

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

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

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

我在document.ready中调用此函数，如下所示：

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

我使用的html如下所示：

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

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

现在，对于手头的问题，单击endtime和starttime字段时应该有一个时间选择器（这可以正常工作），但请查看它在该图像中呈现时间选择器的位置：

---

有人能帮我把时间选择器元素放在它所属的字段旁边（或上面或附近的任何地方）

您缺少一个位置值为“relative”的

.input group

包装器。因为日期选择器是绝对定位的，所以它的容器需要相对定位，才能正确定位日期选择器

所以我相信这样的方法会奏效：

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

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

#starttimepicker {
  position: relative;
}

#endtimepicker {
  position: relative;
}

如果你想听听我的意见，虽然那不是很枯燥。如果您可以控制html，您可以尝试向#starttimepicker和#endtimepicker添加一个“values_uuDatePicker”类（或任何类），并只设置一个CSS规则，如下所示：

.values__datepicker {
  position: relative;
}

---

使用alloy UI组件它也在使用Jquery for base javascript frameworkSorry我对所有这些东西都很陌生（后端开发人员）你能在回答中解释得到什么以及如何使用它吗？Jeremy C只需探索alloy UI你就会得到所有的信息。这使它稍微好一点（现在位置正确）但是现在它没有呈现picker元素，看这里是的，你已经将

overflow

设置为“hidden”。我不知道你为什么这么做，但它会隐藏任何绝对位置的东西。如果你不需要它的任何具体你应该删除它。如果你需要它，让我知道它是什么，我们可以尝试一个更好的解决方案。说实话，我有它，因为我用了一些复制粘贴代码，我从某处得到的，当我试图排队2 div旁边，我绝对不知道css或样式一般：D，但谢谢，这就解决了问题trick@leubauza我刚刚注意到starttime的时间选择器实际上是在正确的位置渲染的，但是endtime的时间选择器是在日期而不是endtime的字段上方渲染的。你知道这里可能有什么问题吗？好的，因此，我们在.values容器上设置了

position:relative

，以便所有内容都与之相关。我现在看到的不是很理想。所以，请参阅我的帖子以获得更新的答案。