jqueryUI datetimepicker 未正确显示答案

【问题标题】：jqueryUI datetimepicker not showing correctlyjqueryUI datetimepicker 未正确显示
【发布时间】：2018-01-06 11:30:06
【问题描述】：

大家好，

我目前正在关注 this tutorial 以实现 jQuery 日期时间选择器。我使用 C#、MVC 和 Bootstrap。我使用的是 ASP.NET 的默认配置（我创建了一个默认的 MVC 项目）刚刚添加了 jQuery UI。

我已经完成了所有步骤，你可以在这里查看我的代码：

 public static void RegisterBundles(BundleCollection bundles)
 {
        bundles.Add(new ScriptBundle("~/bundles/jqueryUI").Include(
                    "~/Scripts/jquery-ui-1.12.1.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));
bundles.Add(new StyleBundle("~/Content/JqueryUICSS").Include(
                 "~/Content/themes/base/jquery-ui.min.css"));
 }

使用剃刀的 HTML：

<div class="form-group">
    @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
    @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
    </div>
</div>

/**add here the date of birth*/
@Html.EditorFor(model => model.DateOfBirth,
new { htmlAttributes = new { @class = "form-control date-picker" } })
<div class="form-group">
    @Html.LabelFor(m => m.Genre, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
       
    @Html.RadioButtonFor(model => model.Genre, true)
    <span>Hombre</span>

    @Html.RadioButtonFor(model => model.Genre, false)
    <span>Mujer</span>

    </div>
</div>

还有脚本部分：

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryUI")
@Scripts.Render("~/Content/JqueryUICSS")
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script type="text/javascript">
     $(function () { $(".date-picker").datepicker({
                changeMonth: true,
                changeYear: true,
                yearRange: "-100:+0",
                dateFormat: 'dd/mm/yyyy'
            });
     });
</script>

结果我得到了这个bad display in datetimepicker。

我该如何解决这个问题？谢谢。

【问题讨论】：

因为您在其他脚本之后包含了jquery（删除）。您还没有包含相关的 css 文件
包含jquery ui css的样式
这个jQuery插入行必须放在最前面：<script src="~/Scripts/jquery-3.1.1.min.js"></script>。还包括您想要使用 StyleBundle 和 Styles.Render 使用的 jQuery UI CSS 包。

标签： c# jquery asp.net-mvc jquery-ui frontend

【解决方案1】：

阅读您的 cmets 后，我意识到当我为 css 渲染包时，我使用了 @Scripts.Render("~/Content/JqueryUICSS") 这个词而不是 @Styles.Render("~/Content/JqueryUICSS" )，谢谢！

【讨论】：