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

我使用的是上帝提供的日期时间选择器，它知道位置在哪里，但是恰好在命名约定为bootstrap-datetimepicker-min.js和.css的一组文件中。我假设这是引导小部件之一，然后，我认为它是基于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>
}

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

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"
                ));

最佳答案

好吧，这显然不是理想的选择，但这是一个可以在CSS中使用的快速修复方法

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

关于jquery - Bootstrap datetimepicker出现在窗口的左上 Angular ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34765942/