http://trentrichardson.com/examples/timepicker/にあるDateTimePickerを使用しています(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>