Question

我正在使用上帝的日期时间选择器知道在哪里，但恰好存在于一组具有命名约定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>
}

布局页面包含包含正确的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;
}

Bootstrap datetimepicker出现在窗口的左上角

1 个答案: