引导日期选择器未在隐藏的输入字段上对齐答案

【问题标题】：Bootstrap datepicker is not aligning on hidden input field引导日期选择器未在隐藏的输入字段上对齐
【发布时间】：2016-08-05 13:11:02
【问题描述】：

您好，我正在 div 标签上尝试内联引导日期选择器，每当我点击 div 标签时，日期选择器弹出窗口就会显示在页面的开头(left=0, top=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"); 
  });

两者都有同样的问题。

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

【问题讨论】：

请分享现场链接/演示，因为它与html结构有关..谢谢
重点是什么？为什么要附加hidden输入..
@Leothelionpls 检查这个文件jsfiddle.net/gZt3rI
试试这个 - stackoverflow.com/a/20265818/4719761
@RayonDabre 先生，这是什么意思？实际上我需要将它附加到今天的 div，一旦我在 div 上单击它，那么 datepicker 弹出窗口应该指向特定的 div 对吗？但它指向页面顶部

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

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

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

Working Fiddle.

您的输入应该如下所示。

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

【讨论】：

像魅力一样工作.. 谢谢 Reddy garu.. 很好地指出但是在引导内联示例中他们只提到了 text="hidden" 还有一件事，我们是否应该将选定的日期更新为 div 文本??像这样的 changeDate 事件 $('#todaysDate').text(ev.format('dd-mm-yyyy'));
开始工作并使用此 $('#datepicker').val() 获取日期值并使用 div $('#todaysDate').text( $('#datepicker').val ());
@user3107283 哦，太好了！！很高兴我能帮助你:)