Bootstrap datetimepicker没有出现在正确的位置

Question

我有一个带有bootstrap datetimepicker的文本框来选择日期。问题是弹出窗口不在预期的位置。

看到弹出窗口向左而不是文本框的位置。这是代码片段..

<div class="form-group">
   <label class="col-sm-4 control-label">Release Date</label>
   @Html.TextBoxFor(m => m.Date, new { @id = "datepicker", @name = "date" })
   @Html.ValidationMessageFor(m => m.Date)
</div>

和javascript ..

$(function () {
    $("#datepicker").datetimepicker({
        format: "MM/DD/YYYY"
    });
});

有谁知道为什么会这样？为什么弹出窗口似乎认为文本框在另一个位置？

Answer 1

假设您已在html中安装并链接了查询，则可以执行以下操作：

<script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
<input type="text" id="datepicker">

我不确定datetimepicker，我使用了日期选择器，它可以工作..

尝试一下（擦除你的代码然后把它放在div中（或者div可能会弄乱它，你可能想把它放在div之外）看看它是否有效

有关详细信息，请访问：https://jqueryui.com/datepicker/（我相信您有，但我想为其他人分享）

Answer 2

我通过使用自定义样式添加div来解决此问题。事实证明问题是由于datetimepicker捕捉到标签而不是文本框造成的。

<div class="form-group">
   <label class="col-sm-4 control-label">Release Date</label>
      <div class="col-sm-4" style="padding-left:0px">
          @Html.TextBoxFor(m => m.Date, new { @id = "datepicker" })
      </div>
   @Html.ValidationMessageFor(m => m.Date)
 </div>