为什么datepicker没有在View上显示?

时间:2015-12-16 10:07:36

标签: jquery asp.net-mvc-4

我有以下视图,其中文本框附加了jquery datepicker,这显示了带有datetime格式标签旁边的DOB按钮的文本框,但是当单击按钮或单击文本框时它不会显示datepicker。我该如何解决这个问题?

@model dtTest.OrderTime

@{
    ViewBag.Title = "Edit";
}

<h2>Edit</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>OrderTime</legend>

        @Html.HiddenFor(model => model.id)

        <div class="editor-label">
            @Html.LabelFor(model => model.TimeZone)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.TimeZone)
            @Html.ValidationMessageFor(model => model.TimeZone)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.TimeUTC)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.TimeUTC)
            @Html.ValidationMessageFor(model => model.TimeUTC)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

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

@section Scripts {

    @Scripts.Render("~/bundles/jqueryval")

    <script>
        $('document').ready(function () {
            $('#TimeUTC').datepicker({
                appendText: 'mm/dd/yyyy',
                showOn: 'both',
                buttonText: 'DOB',
                dateFormat: 'dd/dd/yy',
                changeMonth: true,
                changeYear: true,
                minDate: new Date(2000, 0, 1),
                maxDate: new Date(2005, 0, 1)
            });
        });
    </script>
}

我的布局文件添加了jqueryui包

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")

    @RenderSection("scripts", required: false)
</body>
</html>

捆绑文件是:

    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

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

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

当我单击文本框时,浏览器会在控制台(chrome)中抛出以下错误

enter image description here

这是我的脚本文件夹:

enter image description here

1 个答案:

答案 0 :(得分:1)

visual studio

菜单&gt; TOOLS > Library and Package Manager > Package Manager Console

PM > Install-Package JQuery - 版本按Tab 此处可查看此处的所有版本。

更新现有的jQuery包并使用旧的jQuery版本解决您的问题。

有关详情How to get latest jQuery 1.x via Nuget in Visual Studio?