title: Jquery DateTimePicker not displaying with CSS
body: <p>I am using the DateTimePicker found here: <a href="http://trentrichardson.com/examples/timepicker/" rel="nofollow noreferrer">http://trentrichardson.com/examples/timepicker/</a> (note that I get the same problem described below if I use the default DatePicker within Jquery as well).</p>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/ZDjcL.png" alt="http://imgur.com/D1t78"></p>
  
  <p>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?).</p>
  
  <p>Where do I need to look to solve my problem?</p>
  
  <p>Edit to show my code:</p>
  
  <p>This is the PartialView I am rendering within my page:</p>
  
  <pre><code>&lt;link href="@Url.Content("themes/ui-lightness/jquery-ui-1.8.19.custom.css")" rel="stylesheet"
      type="text/css" /&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery-ui-1.8.19.custom.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/FillCourseForm.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;div id="CourseFormFields"&gt;
  &lt;p&gt;the string is @ViewBag.selectedString&lt;/p&gt;
  @using (Html.BeginForm("ApplyToTeach", "Course", FormMethod.Post))
  {
      @Html.ValidationSummary(true)
      &lt;fieldset&gt;
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.StartDate)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.StartDate)
          @Html.ValidationMessageFor(model =&gt; model.StartDate)
      &lt;/div&gt;
      &lt;p&gt;
          &lt;input type="submit" value="Create" /&gt;
      &lt;/p&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>And the Jquery:</p>
  
  <pre><code>$("#StartDate").datetimepicker({
      ampm: true
  });
  </code></pre>
  
  <p>The generated HTML (truncated a bit to prevent massive wall of code):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;ApplyToTeach&lt;/title&gt;
      &lt;link href="/Content/Site.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="themes/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet"
      type="text/css" /&gt;
      &lt;script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/jquery-ui-1.8.19.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/jquery.unobtrusive-ajax.min.js"  type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="page"&gt;
         &lt;div id="header"&gt;
              &lt;div id="title"&gt;
                  &lt;h1&gt;St. Paul School of Catechesis&lt;/h1&gt;
              &lt;/div&gt;
  
              &lt;div id="logindisplay"&gt;
                      [ &lt;a href="/Account/LogOn"&gt;Log On&lt;/a&gt; ]
  
              &lt;/div&gt;
              &lt;div id="menucontainer"&gt;
                  &lt;ul id="menu"&gt;
                      &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/Student"&gt;Students&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/Course"&gt;Courses&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/Instructor"&gt;Instructors&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="main"&gt;
              &lt;script src="/Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;div id="originalForm"&gt;
  &lt;link href="themes/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet"
      type="text/css" /&gt;
  &lt;script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery.validate.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery-ui-1.8.19.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/FillCourseForm.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;div id="CourseFormFields"&gt;
  &lt;p&gt;the string is &lt;/p&gt;
  &lt;form action="/Course/ApplyToTeach" method="post"&gt;    &lt;fieldset&gt;
          &lt;legend&gt;CourseTemplates&lt;/legend&gt;
          &lt;div class="editor-label"&gt;
              &lt;label for="StartDate"&gt;StartDate&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              &lt;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" /&gt;
              &lt;span class="field-validation-valid" data-valmsg-for="StartDate" data-valmsg-replace="true"&gt;&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;p&gt;
              &lt;input type="submit" value="Create" /&gt;
          &lt;/p&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id ="divToAppend"&gt;
  &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="footer"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>