title: jquery date picker not working MVC4
body: <p>The following are my code files, I tried with these but never see any date picker popup. I don't know where the problem resides, the popup have to come on enrollementdate input box.</p>
  
  <p>student.cs</p>
  
  <pre><code>namespace ContosoSite.Models
  {
      using System;
      using System.Collections.Generic;
      using System.ComponentModel.DataAnnotations;
      [MetadataType(typeof(StudentMetadata))]
      public partial class Student
      {
          public Student()
          {
              this.Enrollments = new HashSet&lt;Enrollment&gt;();
          }
  
          public int StudentID { get; set; }
          public string LastName { get; set; }
          public string FirstName { get; set; }
          [Display(Name = "EnrollmentDate")]
          [DataType(DataType.Date)]
          [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
          public Nullable&lt;System.DateTime&gt; EnrollmentDate { get; set; }
          public string MiddleName { get; set; }
          public virtual ICollection&lt;Enrollment&gt; Enrollments { get; set; }
      }
  }
  </code></pre>
  
  <p>create.cshtml</p>
  
  <pre><code>@model ContosoSite.Models.Student
  
  @{
      ViewBag.Title = "Create";
  }
  
  &lt;h2&gt;Create&lt;/h2&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;
  
  @using (Html.BeginForm()) {
      @Html.ValidationSummary(true)
      &lt;fieldset&gt;
          &lt;legend&gt;Student&lt;/legend&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.LastName)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.LastName)
              @Html.ValidationMessageFor(model =&gt; model.LastName)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.FirstName)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.FirstName)
              @Html.ValidationMessageFor(model =&gt; model.FirstName)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.EnrollmentDate)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.EnrollmentDate)
              @Html.ValidationMessageFor(model =&gt; model.EnrollmentDate)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.MiddleName)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.MiddleName)
              @Html.ValidationMessageFor(model =&gt; model.MiddleName)
          &lt;/div&gt;
  
          &lt;p&gt;
              &lt;input type="submit" value="Create" /&gt;
          &lt;/p&gt;
      &lt;/fieldset&gt;
  }
  
  &lt;div&gt;
      @Html.ActionLink("Back to List", "Index")
  &lt;/div&gt;
  </code></pre>
  
  <p>_layout.cshtml</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;@ViewBag.Title&lt;/title&gt;
      &lt;link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/modernizr-2.5.3.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
          rel="stylesheet" type="text/css" /&gt;
      &lt;link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
          rel="stylesheet"  type="text/css" /&gt;
      &lt;link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
          rel="stylesheet" type="text/css" /&gt;
  
      &lt;script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
          type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
          type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
          type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      @RenderBody()
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>datepicker.js</p>
  
  <pre><code>$(function () {
      $(".datefield").datepicker();
  });
  </code></pre>
  
  <p>date.cshtml</p>
  
  <pre><code>@model DateTime
  Using Date Template
  @Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
    new { @class = "datefield", type = "date"  })
  </code></pre>