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

Question

嗨，我正在div标签上尝试内联引导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

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

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

工作小提琴。

您的输入应如下所示。

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