jQuery的的DateTimePicker不显示的CSS [英] Jquery DateTimePicker not displaying with CSS

查看：354 发布时间：2016/7/1 19:38:55 jquery css asp.net-mvc jquery-ui

本文介绍了jQuery的的DateTimePicker不显示的CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用的DateTimePicker在这里找到： http://trentrichardson.com/examples/timepicker/（请注意，我得到如下所述，如果我使用默认的DatePicker内的Jquery以及同样的问题）。

我已签，我有合适的CSS，图像，jQuery的安装版本/重新安装了很多次，我似乎无法找出是什么原因造成我的DateTimePicker看起来是这样的：

如果我删除了所有的CSS（包括我的站点的默认MVC CSS）我失去了蓝色背景一周的天数（不是这些应该由jQuery UI的主题是彩色的？）。

我在哪里需要寻找解决我的问题？

编辑以显示我的code：

这是我在我的页面内呈现PartialView：

 ＆LT;链接HREF =@ Url.Content（主题/ UI的亮度/ jQuery的-UI-1.8.19.custom.css）的rel =stylesheet属性
    类型=文/ CSS/＆GT;
＆LT;脚本的src =@ Url.Content（〜/脚本/ jQuery的-1.7.2.min.js）TYPE =文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =@ Url.Content（〜/脚本/ jquery.validate.min.js）TYPE =文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =@ Url.Content（〜/脚本/ jquery.validate.unobtrusive.min.js）TYPE =文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =@ Url.Content（〜/脚本/ jQuery的-UI-1.8.19.custom.min.js）TYPE =文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =@ Url.Content（〜/脚本/ jQuery的-UI-timepicker-addon.js）TYPE =文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =@ Url.Content（〜/脚本/ FillCourseForm.js）TYPE =文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT; DIV ID =CourseFormFields＆GT;
＆LT; P＆gt;该字符串是@ ViewBag.selectedString＆LT; / P＆GT;
@using（Html.BeginForm（ApplyToTeach，课程，FormMethod.Post））
{
    @ Html.ValidationSummary（真）
    ＆LT;＆字段集GT;
    ＆LT; DIV CLASS =编辑标记＆GT;
        @ Html.LabelFor（型号=＆GT; model.StartDate）
    ＆LT; / DIV＆GT;
    ＆LT; DIV CLASS =主编场＆GT;
        @ Html.EditorFor（型号=＆GT; model.StartDate）
        @ Html.ValidationMessageFor（型号=＆GT; model.StartDate）
    ＆LT; / DIV＆GT;
    ＆所述p为H.;
        ＆LT;输入类型=提交值=创建/＆GT;
    ＆所述; / P＆GT;
＆LT; /字段集＆GT;

和Jquery的：

  $（＃起始日期）。的DateTimePicker（{
    AMPM：真
}）;

生成的HTML（截断了一下，$ C $的C prevent大规模的墙）：

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
    ＆LT;标题＆GT; ApplyToTeach＆LT; /标题＆GT;
    ＆LT;链接HREF =/内容/的site.css的rel =stylesheet属性类型=文/ CSS/＆GT;
    ＆LT;链接HREF =主题/ UI的亮度/ jQuery的-UI-1.8.19.custom.css的rel =stylesheet属性
    类型=文/ CSS/＆GT;
    ＆LT;脚本的src =/脚本/ jQuery的-1.7.2.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本的src =/脚本/ jQuery的-UI-1.8.19.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本的src =/脚本/ jquery.unobtrusive-ajax.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
    ＆LT; DIV CLASS =页＆GT;
       ＆LT; DIV ID =头＆GT;
            ＆LT; DIV ID =标题＆GT;
                ＆LT; H1＆GT;圣。散碎＆LT保罗学院; / H1＆GT;
            ＆LT; / DIV＆GT;            ＆LT; DIV ID =logindisplay＆GT;
                    [＆LT; A HREF =/帐号/登录＆GT;登录针对＆lt; / A＆GT; ]            ＆LT; / DIV＆GT;
            ＆LT; DIV ID =MenuContainer中＆GT;
                ＆LT; UL ID =菜单＆GT;
                    ＆LT;立GT;＆LT; A HREF =/＆GT;家庭和LT; / A＆GT;＆LT; /李＆GT;
                    ＆LT;立GT;＆LT; A HREF =/学生＆GT;学生和LT; / A＆GT;＆LT; /李＆GT;
                    ＆LT;立GT;＆LT; A HREF =/场＆GT;课程与LT; / A＆GT;＆LT; /李＆GT;
                    ＆LT;立GT;＆LT; A HREF =/导师＆GT;教师和LT; / A＆GT;＆LT; /李＆GT;
                ＆LT; / UL＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV ID =主＆GT;
            ＆LT;脚本的src =/脚本/ jQuery的-UI-timepicker-addon.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT; DIV ID =originalForm＆GT;
＆LT;链接HREF =主题/ UI的亮度/ jQuery的-UI-1.8.19.custom.css的rel =stylesheet属性
    类型=文/ CSS/＆GT;
＆LT;脚本的src =/脚本/ jQuery的-1.7.2.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/脚本/ jquery.validate.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/脚本/ jquery.validate.unobtrusive.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/脚本/ jQuery的-UI-1.8.19.custom.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/脚本/ jQuery的-UI-timepicker-addon.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/脚本/ FillCourseForm.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT; DIV ID =CourseFormFields＆GT;
＆所述，P＆gt;本串为＆lt; / P＆GT;
＆LT;形式的行动=/场/ ApplyToTeach的方法=后＆GT; ＆LT;＆字段集GT;
        ＆LT;传奇＆GT; CourseTemplates＆LT; /传说＆GT;
        ＆LT; DIV CLASS =编辑标记＆GT;
            ＆LT;标签=起始日期＆GT;起始日期＆LT; /标签＆gt;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =主编场＆GT;
            ＆LT;输入类=文本框单行数据-VAL =真正的数据-VAL-所需=是必需的起始日期字段 ID =起始日期NAME =起始日期类型=文本VALUE =1/1/0001 12:00:00 AM/＆GT;
            ＆LT;跨度类=现场验证，有效的数据valmsg换=起始日期数据valmsg替换=真正的＆GT;＆LT; / SPAN＆GT;
        ＆LT; / DIV＆GT;        ＆所述p为H.;
            ＆LT;输入类型=提交值=创建/＆GT;
        ＆所述; / P＆GT;
    ＆LT; /字段集＆GT;
＆LT; /形式为GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =divToAppend＆GT;
＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV ID =页脚＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

解决方案

我在做这个第二个答案，因为我第一次有好点为您code。

如果您在PartialView注意到，您用于脚本和CSS Url.Content路径。然而，当你和你的脚本不使用从根本上为您的jQuery-ui.custom.css路径的路径。注...

 ＆LT;链接HREF =@ Url.Content（主题/ UI的亮度/ jQuery的-UI-1.8.19.custom.css）的rel =stylesheet属性
    类型=文/ CSS/＆GT;
＆LT;脚本的src =@ Url.Content（〜/脚本/ jQuery的-1.7.2.min.js）TYPE =文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;

我相信这应该不是是...（用的CSS适当的路径替换 - 我总是把我的CSS中的/文件夹的内容在我的项目）。

 ＆LT;链接HREF =@ Url.Content（〜/内容/主题/ UI的亮度/ jQuery的-UI-1.8.19.custom.css）相对= 样式
    类型=文/ CSS/＆GT;
＆LT;脚本的src =@ Url.Content（〜/脚本/ jQuery的-1.7.2.min.js）TYPE =文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;

I am using the DateTimePicker found here: http://trentrichardson.com/examples/timepicker/ (note that I get the same problem described below if I use the default DatePicker within Jquery as well).

I have checked that I have the appropriate CSS, images, version of jquery installed/reinstalled many times and I cannot seem to find what is causing my DateTimePicker to look like this:

If I remove all CSS (including my site's default MVC CSS) I lose the blue background to the days of the week (aren't these supposed to be colored by the Jquery UI theme?).

Where do I need to look to solve my problem?

Edit to show my code:

This is the PartialView I am rendering within my page:

<link href="@Url.Content("themes/ui-lightness/jquery-ui-1.8.19.custom.css")" rel="stylesheet"
    type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.19.custom.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/FillCourseForm.js")" type="text/javascript"></script>
<div id="CourseFormFields">
<p>the string is @ViewBag.selectedString</p>
@using (Html.BeginForm("ApplyToTeach", "Course", FormMethod.Post))
{
    @Html.ValidationSummary(true)
    <fieldset>
    <div class="editor-label">
        @Html.LabelFor(model => model.StartDate)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.StartDate)
        @Html.ValidationMessageFor(model => model.StartDate)
    </div>
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

And the Jquery:

$("#StartDate").datetimepicker({
    ampm: true
});

The generated HTML (truncated a bit to prevent massive wall of code):

<!DOCTYPE html>
<html>
<head>
    <title>ApplyToTeach</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="themes/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet"
    type="text/css" />
    <script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-ui-1.8.19.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.min.js"  type="text/javascript"></script>
</head>
<body>
    <div class="page">
       <div id="header">
            <div id="title">
                <h1>St. Paul School of Catechesis</h1>
            </div>

            <div id="logindisplay">
                    [ <a href="/Account/LogOn">Log On</a> ]

            </div>
            <div id="menucontainer">
                <ul id="menu">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Student">Students</a></li>
                    <li><a href="/Course">Courses</a></li>
                    <li><a href="/Instructor">Instructors</a></li>
                </ul>
            </div>
        </div>
        <div id="main">
            <script src="/Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<div id="originalForm">
<link href="themes/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet"
    type="text/css" />
<script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<script src="/Scripts/FillCourseForm.js" type="text/javascript"></script>
<div id="CourseFormFields">
<p>the string is </p>
<form action="/Course/ApplyToTeach" method="post">    <fieldset>
        <legend>CourseTemplates</legend>
        <div class="editor-label">
            <label for="StartDate">StartDate</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" data-val="true" data-val-required="The StartDate field is required." id="StartDate" name="StartDate" type="text" value="1/1/0001 12:00:00 AM" />
            <span class="field-validation-valid" data-valmsg-for="StartDate" data-valmsg-replace="true"></span>
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
</form></div>
</div>
<div id ="divToAppend">
</div>
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

解决方案

I'm making this a second answer since my first has good point for your code.

If you notice in your PartialView, you use Url.Content paths for your scripts and css. However, you aren't using a path from the root for your jquery-ui.custom.css path as you are with your scripts. Note...

<link href="@Url.Content("themes/ui-lightness/jquery-ui-1.8.19.custom.css")" rel="stylesheet"
    type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>

I believe it should instead be...(replace with the appropriate path to the CSS - I always put my CSS in the /Content folder in my project).

<link href="@Url.Content("~/Content/themes/ui-lightness/jquery-ui-1.8.19.custom.css")" rel="stylesheet"
    type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>

这篇关于jQuery的的DateTimePicker不显示的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

jQuery的的DateTimePicker不显示的CSS [英] Jquery DateTimePicker not displaying with CSS

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

jQuery的的DateTimePicker不显示的CSS [英] Jquery DateTimePicker not displaying with CSS

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭