Jquery DateTimePicker不能用CSS显示 [英] Jquery DateTimePicker not displaying with CSS
问题描述
我使用的是DateTimePicker： http://trentrichardson.com/examples/timepicker/（注意，如果我在Jquery中使用默认的DatePicker，我得到了相同的问题）。
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).
我检查了我有合适的CSS， ，版本的jquery安装/重新安装多次，我似乎无法找到什么是导致我的DateTimePicker看起来像这样：
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:
如果我删除所有CSS（包括我的网站的默认MVC CSS）我失去了一周的蓝色背景（不是这些应该是由Jquery UI主题着色的）。
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?
编辑以显示我的代码：
这是PartialView
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>
和Jquery：
$("#StartDate").datetimepicker({
ampm: true
});
生成的HTML（截断一点以防止大量的代码）：
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>
推荐答案
如果您注意到您的PartialView，您的脚本和CSS使用Url.Content路径。但是，您没有使用您的jquery-ui.custom.css路径的根目录中的路径作为您的脚本。注意...
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>
我相信它应该是...（替换为CSS的适当路径 - 将我的CSS放在我的项目的/ Content文件夹中）。
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屋！
