title: jquery datepicker in mvc3
body: <p>I want to use jquery date picker on all datetime fields, so I have following inside my mvc3 project </p>
  
  <p>Model</p>
  
  <pre><code>public DateTime? DateTime{ get; set; }
  </code></pre>
  
  <p>Views/Shared/EditorTemplates</p>
  
  <pre><code>@model DateTime?
  @Html.TextBox("", Model.ToString(), new { @class = "date" })
  </code></pre>
  
  <p>and on _Layout.cshtml page I have </p>
  
  <pre><code>$(document).ready(function () {
     $(".date").datepicker();
  });
  </code></pre>
  
  <p>I have referenced datepicker css and other jquery files (jqueryui and jquery-1.5.1.js)</p>
  
  <pre><code>   &lt;script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" /&gt;
  </code></pre>
  
  <p>error message is following</p>
  
  <pre><code>TypeError: $(".date").datepicker is not a function
  [Break On This Error]       
  $(".date").datepicker();
  </code></pre>
  
  <p>Thanks</p>