title: MVC and jQuery datepicker
body: <p>What I'm trying to is apply datepicker into textboxes with <code>class</code> attribute equals <code>datepicker</code>.</p>
  
  <p>So I'm doing it like this:
  <strong>_Layout.cshtml</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;@ViewBag.Title&lt;/title&gt;
      &lt;link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
      &lt;script src="@Url.Content("~/Scripts/jquery-2.0.2.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-1.10.3.js")" 
      type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;div class="content-wrapper"&gt;
              &lt;div class="float-right"&gt;
                  &lt;nav&gt;
                      &lt;ul id="menu"&gt;
                          &lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
      &lt;div id="body"&gt;
          @RenderSection("featured", required: false)
          &lt;section class="content-wrapper main-content clear-fix"&gt;
              @RenderBody()
          &lt;/section&gt;
      &lt;/div&gt;
  
      @Scripts.Render("~/bundles/jquery")
      @RenderSection("scripts", required: false)
  &lt;/body&gt;
  </code></pre>
  
  <p>
  <strong>view1.cshtml</strong></p>
  
  <pre><code>@model Zaliczenie_SIG.Models.InvoiceModel
  @{
      ViewBag.Title = "Add";
      Layout = "~/Views/Shared/_Layout.cshtml";
  }
  </code></pre>
  
  <h2>Add</h2>
  
  <pre><code>@using (Html.BeginForm()) {
  @Html.AntiForgeryToken()
  @Html.ValidationSummary(true)
  
  &lt;fieldset&gt;
      &lt;legend&gt;Invoice&lt;/legend&gt;
  
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.InvoiceType)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.DropDownList("InvoiceType",string.Empty)
          @Html.ValidationMessageFor(model =&gt; model.InvoiceType)
      &lt;/div&gt;
  
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.TransactionDate)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.TextBoxFor(model =&gt; model.TransactionDate, new { @class="datepicker"})
          @Html.ValidationMessageFor(model =&gt; model.TransactionDate)
      &lt;/div&gt;
  
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.PaymentDate)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.TextBoxFor(model =&gt; model.PaymentDate, new { @class="datepicker"})
          @Html.ValidationMessageFor(model =&gt; model.PaymentDate)
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.ContractorId)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.DropDownList("ContractorId",string.Empty)
          @Html.ValidationMessageFor(model =&gt; model.ContractorId)
      &lt;/div&gt;
      &lt;p&gt;
          &lt;input type="submit" value="Add" /&gt;
      &lt;/p&gt;
  &lt;/fieldset&gt;
  }
  
  &lt;div&gt;
     @Html.ActionLink("Return to list", "Index")
  &lt;/div&gt;
  
  @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    &lt;script type="text/javascript"&gt;
          jQuery(document).ready(function() {
              $(".datepicker").each(function () {$(this).datepicker();});
          });
    &lt;/script&gt;
  }
  </code></pre>
  
  <p><strong>Model.cs</strong></p>
  
  <pre><code>public int Id { get; set; }
      [DisplayName("type")]
      [Required(ErrorMessage = "required")]
      public int InvoiceType { get; set; }
      [DisplayName("Operation date")]
      [Required(ErrorMessage = "required", AllowEmptyStrings = false)]
      public DateTime TransactionDate { get; set; }
      [DisplayName("Paymant date")]
      public DateTime? PaymentDate { get; set; }
      public DateTime DateOfIssue { get; set; }
      [DisplayName("Pozycje Faktury")]
      public IEnumerable&lt;InvoiceItemModel&gt; InvoiceItems { get; set; }
      [Required(ErrorMessage = " required")]
      [DisplayName("Contractor")]
      public int ContractorId { get; set; }     
  
      public InvoiceModel(){}
  </code></pre>
  
  <p>But with this I get js error which say: Uncaught TypeError: Object [object Object] has no method 'datepicker' 
  What am I doing wrong and need to change to make it work as it should?</p>