jquery - Bootstrap datetimepicker 出现在窗口的左上角

Question

我正在使用天知道在哪里的日期时间选择器，但它恰好存在于一组具有命名约定 bootstrap-datetimepicker-min.js 和 .css 的文件中。我假设这是 Bootstrap 小部件之一，那么，我认为它基于 jQuery UI 的日期时间选择器。无论如何，该 API 与 jQuery UI 日期时间选择器非常相似。

所以，我有这段代码，但是一旦我点击日期输入字段，日期时间选择器就会出现在窗口的左上角，然后它也不会消失。

ThePage.cshtml

...

<!-- stuff -->

<div class="form-group">
            @Html.LabelFor(model => model.FromDate, htmlAttributes: new { @class = "control-label col-md-2"})
            <div class="col-md-10">
                <input type="text"class="form-control" id="dtFromDate" name="FromDate" />
                @Html.ValidationMessageFor(model => model.FromDate, "", new { @class = "text-danger" })
            </div>
        </div>

@section scripts {
    <script type="text/javascript">
        $(document).ready(Initialize);

        function Initialize()
        {
            $('#dtFromDate').datetimepicker();
            $('#dtToDate').datetimepicker();
        }
    </script>
}

布局页面包含包含正确的 JavaScript 和 CSS 文件的 include 语句:

Layout.cshtml

<!-- on the top of the page somewhere -->
@Styles.Render("~/Content/css")

...
<!-- stuff -->

<!-- at the bottom of the layout page -->
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/components")
@RenderSection("scripts", required: false)

BundleConfig.cs

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/site.css",
                      "~/Content/Calendar/css/bootstrap-datetimepicker.min.css",
                      "~/Content/select2/css/select2.min.css"
                      ));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"
                      ));

bundles.Add(new ScriptBundle("~/bundles/components").Include(
                "~/Content/Calendar/js/bootstrap-datetimepicker.min.js",
                      "~/Content/select2/js/select2.full.min.js",
                      "~/Content/select2/js/i18n/en.js"
                ));

Answer 1

这显然不理想，但这是一个适用于 CSS 的快速修复

span.select2-container[style='position: absolute; top: 0px; left: 0px;'] {
    display: none;
}