Question

我跟着这个家伙的第三个解决方案：

https://blog.jigsawpieces.me/2014/07/23/lbd-adding-datetimepicker-control-to-mvc-project/

几乎说要通过Visual Studio中的Nuget Package Manager安装：

Install-Package Bootstrap.v3.Datetimepicker

然后将其添加到Bundle.config：

bundles.Add(new ScriptBundle("~/bundles/moment").Include(
                    "~/Scripts/moment.js"));

我看到它显示输入字段旁边的日历图标，但是当我点击它时，日历不会下拉。这是我的Bundle.config文件：

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

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

        // 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/moment").Include(
                   "~/Scripts/moment.js"));

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

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css", 
                  "~/Content/themes/base/jquery.ui.all.css",
                  "~/Content/site.css"));


    }

这是我的视图，显示此输入字段：

<div class="row">
                            <div class='col-sm-6'>
                                <div class="form-group">
                                    <div class='input-group date' id='datetimepicker1'>
                                        <input type='text' class="form-control datepicker" />
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <script type="text/javascript">
                                    $(function () {
                                        $('#datetimepicker1').datetimepicker({ format: 'dd MM yyyy - hh:ii' });
                                    });
                            </script>
                        </div>

我做错了什么？为什么日历下拉并显示日期选择器？

这是我的新Bundle.config。我添加了其他js和css文件，但仍然没有：

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

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

        // 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/moment").Include(
                   "~/Scripts/moment.js"));

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

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/bootstrap-datetimepicker.min.css",
                  "~/Content/themes/base/jquery.ui.all.css",
                  "~/Content/site.css"));


    }

Answer 1

您缺少datetimepicker资源。

来自您发布的博客：

运行此命令会将新版本的bootstrap-datetimepicker.js和bootstrap-datetimepicker.css添加到我的项目中。我需要做的唯一额外配置是将moment.js添加到BundleConfig.cs文件

之前的步骤添加了这些文件。

我创建了一个新的MVC项目并使其正常运行。

<强> BundleConfig.cs

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/modernizr").Include(
                    "~/Scripts/modernizr-*"));

    bundles.Add(new ScriptBundle("~/bundles/moment").Include(
                "~/Scripts/moment.js"));

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

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

<强> _Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="container body-content">
        @RenderBody()
    </div>

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

请注意，需要在datetimepicker之前加载Moment。片刻是单独的下载。

<强> Index.cshtml

<div class="row">
    <div class="col-md-4">
        <input type="text" id="datetimepicker1" />
    </div>
</div>

@section scripts {
    <script>
        $("#datetimepicker1").datetimepicker();
    </script>
}

Bootstrap datepicker在MVC项目中不起作用

1 个答案: