Bootstrap 日期时间选择器未出现在正确的位置

Question

我有一个带有 bootstrap 到 select 日期的日期时间选择器的文本框。问题是弹出窗口不在预期位置。

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

<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 解决了这个问题。原来问题是因为日期时间选择器捕捉到标签而不是文本框。

<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>

Bootstrap 日期时间选择器未出现在正确的位置

Bootstrap datetimepicker not appearing in correct place

javascript

html

css

twitter-bootstrap

datetimepicker