Question

我正在开发一个项目，它安装了几个NuGet客户端脚本（bootstrap ect ..）包。

在某个地方，我更新了包裹并进行了一些更改...... 现在，datepicker不再运行了。见截图。

这是我的输入字段：

<input class="form-control end-of-bookyear valid" data-val="true" data-val-date="The field End of book year must be a date." id="EndOfBookYear" name="EndOfBookYear" type="text" value="" aria-describedby="EndOfBookYear-error" aria-invalid="false">

应该持有datepicker的div：

<div id="mceu_123" class="mce-widget mce-tooltip mce-tooltip-n" role="presentation" style="left: 441.328px; top: 383px; z-index: 131070; display: none;"><div class="mce-tooltip-arrow"></div><div class="mce-tooltip-inner">Print</div></div>

我很确定这是一个jQuery CSS问题。

我在哪里开始解决此问题？

我将分享一些内容以向您展示我的情况。我接近绝望了！ 请帮我解决这个难题，或者至少告诉我从哪里开始解决这个难题。

这是我的bundleconfig：

public class BundleConfig
{
    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
    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.js"));

        bundles.Add(new ScriptBundle("~/bundles/moment").Include(
                    "~/Scripts/moment.min.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/respond.js"));

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

        bundles.Add(new ScriptBundle("~/bundles/site").Include(
                  "~/Scripts/gridmvc.min.js",
                  "~/Scripts/Site.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/Gridmvc.css",
                  "~/Content/bootstrap.css",
                  "~/Content/datepicker.min.css",
                  "~/Content/daterangepicker-bs3.css",
                  "~/Content/site.css"));
    }
}

我的BootstrapEditorTemplatesConfig：

public class BootstrapEditorTemplatesConfig
{
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles()
    {
        BundleCollection bundles = BundleTable.Bundles;

        bundles.Add(new ScriptBundle("~/Scripts/val").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate.js",
                    "~/Scripts/jquery.validate*",
                    "~/Scripts/validation.js"
                    ));

        bundles.Add(new ScriptBundle("~/Scripts/bootstrap").Include(
                    "~/Scripts/bootstrap*",
                    //"~/Scripts/globalize/globalize.js",
                    "~/Scripts/globalize.js",
                    //"~/Scripts/globalize/cultures/globalize.culture." + System.Globalization.CultureInfo.CurrentCulture.ToString() + ".js",                        
                    "~/Scripts/filebutton.js"
                    //"~/Scripts/globalize-datepicker.js"
                    ));

        bundles.Add(new ScriptBundle("~/Scripts/md").Include(
            "~/Scripts/MarkdownDeepLib.min.js",
            "~/Scripts/markdown.js"
            ));

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

        // By default it will exclude the MarkdownDeepLib.min.js file because of its .min.js extension.
        bundles.IgnoreList.Clear();
        // BundleTable.EnableOptimizations = true;
    }
}

这是我的_Layout.cshtml

中的 Head 部分

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Query Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/moment")
    @Html.Partial("Variables", variablesVm)
</head>

这是我的_Layout.cshtml主体的末尾：

    @Scripts.Render("~/Scripts/bootstrap")
    @Scripts.Render("~/Scripts/val") 
    @Scripts.Render("~/Scripts/md")
    @Scripts.Render("~/bundles/daterangepicker")
    @Scripts.Render("~/bundles/site")
    @RenderSection("scripts", required: false)

    <!-- TinyMCE -->
    <script src="@Url.Content("~/Scripts/tinymce/tinymce.js")" type="text/javascript"></script>
    <script type="text/javascript">
    tinymce.init({
        height: @tinyMceDefaultHeight,
        image_advtab: true,
        plugins: [
            "advlist autolink autosave lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "template paste textcolor colorpicker textpattern imagetools"
        ],
        resize: false,
        selector: "textarea#BackgroundInfo,textarea#Question,textarea#OwnTeamAnalysis,textarea#Answer,textarea#ImplementationExplanation,textarea#Text",
        statusbar: false,
        theme: "modern",
        toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        toolbar2: "print preview media | forecolor backcolor",
    });
    </script>
</body>

这是我的脚本文件夹：

这是我的内容文件夹：

我还必须从validation.js中删除代码因为它使用：Globalize.culture，它在更新nuGet包之后不是新Globalize的功能。

/// <reference path="../jquery-1.9.1.js" />
/// <reference path="../jquery.globalize/globalize.js" />
/// <reference path="../moment.js" />


$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest(".form-group").addClass("has-error");
    },
    unhighlight: function (element) {
        $(element).closest(".form-group").removeClass("has-error");
    }
});

//$(function () {
//    /* initialize globalization, for parsing dates and decimals */
//    var data = $("html").attr("lang") || $("meta[http-equiv='content-language']").attr("content") || "en-US";
//    Globalize.culture(data);

//    $.validator.methods.number = function (value, element) {
//        return this.optional(element) || !isNaN(Globalize.parseFloat(value));
//    }

//    $.validator.methods.date = function (value, element) {
//        return this.optional(element) || !isNaN(Globalize.parseDate(value));
//    }
//    //moment.lang(data, {
//    //    days: Globalize.culture().calendar.days.names,
//    //    daysShort: Globalize.culture().calendar.days.namesAbbr,
//    //    daysMin: Globalize.culture().calendar.days.namesShort,
//    //    months: Globalize.culture().calendar.months.names,
//    //    monthsShort: Globalize.culture().calendar.months.namesAbbr
//    //});
//});

jQuery datepicker不工作 - ＆gt;要执行哪些步骤？

0 个答案: