javascript - Bootstrap 日期选择器未在隐藏的输入字段上对齐

Question

您好，我正在 div 标签上尝试内联 Bootstrap 日期选择器，每当我单击 div 标签时，日期选择器弹出窗口都会显示在页面开头(左=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>

J查询代码

$(".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 中的输入元素，因此现在它在 UI 上没有任何空间，并且您正在将日期选择器插件应用到这个隐藏的输入元素。该插件适用，但插件的内部逻辑是在元素放置在 UI 中的位置打开日期选择器，但问题是您的元素在 UI 中没有任何位置，所以插件默认选择器的位置是 top:0 和 left:0

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

Working Fiddle.

您的输入应如下所示。

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