javascript - MVC 5 Bootstrap.v3.Datetimepicker.CSS 错误 : Object doesn't support property or method 'datetimepicker'

Question

我正在构建一个 MVC 5 应用程序，我正在尝试使用 Bootstrap.v3.Datetimepicker.CSS .

我有一个 Javascript 文件

$(document).ready(
function () {
    $('.datetimepicker').datetimepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd/mm/yyyy"
    });
});

这是我的包的样子

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

        // 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/bootstrap-datepicker.js",
                  "~/Scripts/DatePickerReady.js",
                  "~/Scripts/respond.js"));

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

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

        // Set EnableOptimizations to false for debugging. For more information,
        // visit http://go.microsoft.com/fwlink/?LinkId=301862
        BundleTable.EnableOptimizations = true;

这是 View

    <h2>Create</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>CreateEditSeasonViewModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })                 

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

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

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

  <div>
      @Html.ActionLink("Back to List", "Index")
  </div>

当我运行该应用程序时，我在 IE 11 和 Firefox 中收到此错误。

我做错了什么，我该如何摆脱这个障碍？

更新:我关注了很多博客，包括这些；

adding-datetimepicker-control-to-mvc-project

bootstrap-datetimepicker

Answer 1

听起来你的插件没有加载，或者没有及时加载。要检查的一些事项:

• 你重建你的元素了吗？
• 您是否使用过 firebug 或其他开发人员工具来确保加载日期选择器 javascript？
• 您是否以正确的顺序放置了 bootstrap 和 jquery 包？
• 您是否在调用 datetimepicker() 之前加载它们？