jQuery 日期时间选择器不呈现 CSS 文件答案

【问题标题】：jQuery datetime picker not rendering CSS filejQuery 日期时间选择器不呈现 CSS 文件
【发布时间】：2012-10-24 15:25:28
【问题描述】：

我在 ASP.Net MVC3 中使用 jQuery 日期时间选择器。出于某种原因，尽管显示了 datetimepicker，但样式表并没有正确呈现。

（我会发布一张照片，但我是新来的，所以我会描述它，因为我无法发布照片）

当我单击应该触发日期时间选择器的文本框时，与 jQuery 演示中显示的默认示例非常相似，它会打开日历视图，但缺少背景并且文本“prevnext”显示在月份上方，并且年，因此它相对于它上面的其他形式看起来是透明的。类似于这篇文章 - Jquery DateTimePicker not displaying with CSS 但我什至没有得到蓝色背景。

这篇文章的答案：Jquery DateTimePicker not displaying with CSS 是针对部分视图而不是完整视图，并且该解决方案对我没有帮助，所以我想知道完整视图是否有任何不同。

我在 Site.Master 中有以下代码：

<script src="<%: Url.Content("~/Content/themes/base/jquery-ui.css") %>" rel="stylesheet"></script>
<script src="<%: Url.Content("~/Content/themes/base/jquery.ui.datepicker.css") %>" rel="stylesheet"></script>
<script src="<%: Url.Content("~/Scripts/jquery-1.8.2.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.ui.core.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.ui.widget.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.ui.datePicker.js") %>" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $(".dp").datepicker({
        dateFormat: 'mm/dd/yy'
        });
    });
</script>

在我的内容页面（视图）中，控件声明如下：

    <asp:TextBox ID="txtBirthday" runat="server" class="dp" />

我还专门声明了另一个现有样式表来设置页面布局：

    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

最后，一个辅助视图控件用于识别设置为日期时间选择器的文本框：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>

<%: Html.TextBox("",  String.Format("{0:yyyy-MM-dd}", Model.HasValue ? Model : DateTime.Today), new { @class = "dp"})%>

谁能帮我解释为什么 CSS 不呈现？

【问题讨论】：

老兄！伙计，伙计，伙计……伙计。不要将 jQueryUI 直接用于 ASP.Net 应用程序。不是说你不能，有变通办法，但你会遇到一个接一个的问题。只需获取常规 jQuery，然后转到 HERE。它被称为JuiceUI，它基本上是 jQueryUI FOR ASP.NET ！！！伙计！走！走！走！见JuiceUI DatePicker Here!!!
您是否尝试查看您的视图中显示的“开发人员工具”？尝试找出存在哪些 CSS 规则...
@SpYk3HH 我检查了 JuiceUI，日期选择器效果很好！是否有我可以调整日期选择器颜色的特定样式表？
基本上 JuiceUI 使用 jQueryUI。所以如果你想要一个不同的他们，你可以在 jQueryUI 上创建它，然后下载它并将它移动到你的项目中，然后在安装 JuiceUI 后更改CssManager Path line。除此之外，如果您想编辑日期选择器 css 的特定部分，您只需查看其类名，创建自己的样式表并使用这些类名来操作您想要的内容。您可以通过在 Firefox 或 chrome 中打开项目来找到所有特定的类名
然后只需右键单击要更改的日期选择器元素，然后转到“使用萤火虫检查元素”或“检查元素”并获取类名。 BTW here is a q&a关于如何更改juiceui主题

标签： jquery asp.net asp.net-mvc-3

【解决方案1】：

这个：

<script src="<%: Url.Content("~/Content/themes/base/jquery-ui.css") %>" rel="stylesheet"></script>
<script src="<%: Url.Content("~/Content/themes/base/jquery.ui.datepicker.css") %>" rel="stylesheet"></script>

完全不正确。你需要在<head>标签中使用<link>标签来加载CSS文件：

<link rel="stylesheet" type="text/css" href="<%: Url.Content("~/content/themes/base/jquery-ui.css") %>" />
<link rel="stylesheet" type="text/css" href="<%: Url.Content("~/content/themes/base/jquery.ui.datepicker.css") %>" />

编辑：抱歉，没有注意到您正在使用 WebPages 视图引擎 - 我的示例是 Razor 语法。

【讨论】：

直到我搬到 Juice 之后才看到这个，但感谢您阐明什么是呈现 CSS 文件的最佳方式。