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…
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).