Question

我目前正致力于将datetimepicker添加到我的MVC5项目中。我决定使用Eonasdan的Bootstrap.v3.datetimepicker。现在，我有一定程度的工作，但格式化不正确。未选择当前日期，月份/年份未集中对齐，时间图标也未集中对齐。此外，当尝试更改月/年时，月/年全部显示在一行上。

它必须与CSS相关，但是，我不知道如何解决它。有没有人有同样的问题并解决了这个问题？

bundleconfig.cs

const createStoreWithMiddleware  = compose(
  applyMiddleware(
    thunkMiddleware,
    createLogger()
  ),
  window.devToolsExtension ? window.devToolsExtension() : f => f
)

const store = createStore(
  reducers,
  createStoreWithMiddleware
);

export default store;

_Layout.cshtml

        public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/datetime").Include(
            "~/Scripts/moment*",
            "~/Scripts/bootstrap-datetimepicker*"));

        //         // Use the development version of Modernizr to develop with and learn from. Then, when you're
        //         // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        //         bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
        //                     "~/Scripts/modernizr-*"));

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

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));

                 bundles.Add(new ScriptBundle("~/bundles/jqueryui")
        .Include("~/Scripts/jquery-ui-{version}.js"));

                 bundles.Add(new StyleBundle("~/Content/jqueryui")
                    .Include("~/Content/themes/base/all.css"));

    }

Create.cshtml - control

...
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/datetime")
@RenderSection("scripts", required: false)
</body>
</html>

Create.cshtml - 脚本

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

Answer 1

您可能错过了bootstrap-datetimepicker.css。

请参阅以下链接： Follow the GitHub Link- By Eonasdan

MVC5 Bootstrap Datetimepicker CSS无法正确格式化

1 个答案: