jqueryUI datetimepicker 未正确显示

Posted 2023-05-09

【中文标题】jqueryUI datetimepicker 未正确显示

【英文标题】：jqueryUI datetimepicker not showing correctly

【发布时间】：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 包。

【参考方案1】：

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