Bootstrap datepicker未在隐藏的输入字段上对齐

Question

您好我在div标签上尝试内联bootstrap datepicker，每当我点击div标签时，datepicker弹出窗口就显示在页面的开头（左= 0，顶部= 0）

Div点击是今天的日期，我想获取日期并更改今天的日期文本。

  <input type="hidden" id="datepicker" 
     data-provide='datepicker' 
     data-date-container='#todaysDate'>

<div id="todaysDate" class="trigger" 
   style="text-align: center; padding-top: 10px;
      font-weight: bold; color: #f58125; font-size: 16px;">

我也试过以下代码

form class="form-date" role="form">
        <div class="form-group" id="datepickid">
    <div id="todaysDate" class="trigger"style="text-align: center;
       padding-top: 10px; font-weight: bold; color: #f58125; 
      font-size: 16px;">
            </div>
    <input type="hidden" name="dt_due" id="datepicker">
 </div>
</form>

Jquery代码

$(".trigger").click(function(){

        $( "#datepicker" ).datepicker({ format: 'dd-mm-yyyy',
            startDate: '01/01/1900',
            endDate: '12/30/2099',
            ignoreReadonly: true
        }).on('changeDate', function(ev){ 
            $('#todaysDate').text(ev.format('dd-mm-yyyy'));
            $("#datepicker").datepicker('hide'); 
        });  

         $("#datepicker").datepicker("show"); 
  });

都有同样的问题。

代码有什么问题？ 请有人帮帮我

Answer 1

正如我的评论所述。你是UI中的Hiding输入元素，所以现在它在UI上没有任何空间，并且你将日期选择器插件应用于这个隐藏的输入元素。该插件应用很好，但插件的内部逻辑是在元素放置在UI中的位置打开日期选择器，但问题是你的元素在UI中没有任何位置，所以插件默认选择器的位置为top:0和left:0

解决方案：您可以使用type="hidden"而不是style="visibility:hidden"。这将确保元素占用UI上的一些空间，然后选择器也将在此位置打开。

Working Fiddle.

您的输入应如下所示。

<input type="text" id="datepicker" style="visibility:hidden">