我正在使用在这里找到的 DateTimePicker:http: //trentrichardson.com/examples/timepicker/(请注意,如果我在 Jquery 中使用默认的 DatePicker,也会遇到下面描述的相同问题)。
我已经检查过我是否多次安装/重新安装了适当的 CSS、图像、jquery 版本,但我似乎找不到导致我的 DateTimePicker 看起来像这样的原因:
如果我删除所有 CSS(包括我网站的默认 MVC CSS),我会失去一周中的几天的蓝色背景(这些不应该由 Jquery UI 主题着色吗?)。
我需要去哪里解决我的问题?
编辑以显示我的代码:
这是我在页面中呈现的 PartialView:
<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(被截断一点以防止大量代码墙):
<!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>