title: asp.net mvc 3 razor & jquery ui datepicker
body: <p>i want to show jquery datepickers on my datetime textboxes.</p>
  
  <p>I created DateTime.cshtml file in Views/Shared/EditorTemplates add added this:</p>
  
  <pre><code>@model Nullable&lt;System.DateTime&gt;
  @if (Model.HasValue)
  {
      @Html.TextBox("", String.Format("{0:yyyy-MM-dd HH:mm}", Model.Value), new { @class = "date" })
  }
  else
  {
      @Html.TextBox("", String.Format("{0:yyyy-MM-dd HH:mm}", ""), new { @class = "date" })
  }
  @{
      string name = ViewData.TemplateInfo.HtmlFieldPrefix;
      string id = name.Replace(".", "_");
  }
  &lt;reference path="jquery-1.4.4.js" /&gt;
  &lt;reference path="jquery-ui.js" /&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $(".date").datepicker
              ({
                  dateFormat: 'dd/mm/yy',
                  showStatus: true,
                  showWeeks: true,
                  highlightWeek: true,
                  numberOfMonths: 1,
                  showAnim: "scale",
                  showOptions: {
                      origin: ["top", "left"]
                  }
              });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is my view:</p>
  
  <pre><code>&lt;td&gt;
                  &lt;div class="editor-label" &gt;
                      @Html.LabelFor(model =&gt; model.Birthdate)
                  &lt;/div&gt;
                  &lt;div class="editor-field"&gt;
                      @Html.EditorFor(model =&gt; model.Birthdate, null, new { @class = "date"})
                      @Html.ValidationMessageFor(model =&gt; model.Birthdate)
                  &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>My model in entity ado model:</p>
  
  <pre><code> public Nullable&lt;global::System.DateTime&gt; Birthdate
          {
              get
              {
                  return _Birthdate;
              }
              set
              {
                  OnBirthdateChanging(value);
                  ReportPropertyChanging("Birthdate");
                  _Birthdate = StructuralObject.SetValidValue(value);
                  ReportPropertyChanged("Birthdate");
                  OnBirthdateChanged();
              }
          }
  </code></pre>
  
  <p>but it does not working i have added <code>$(".date").click(function{alert('Clicked')});</code> in <code>DateTime.cshtml</code> but jquery does not alerting anything</p>
  
  <p>thanks</p>
  
  <p>Browser html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  
      &lt;title&gt;Add Client - Lombard Admin Panel&lt;/title&gt;
  
      &lt;link href="/Content/Site.css" rel="stylesheet" type="text/css" /&gt;
  
      &lt;script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script src="/Scripts/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;link href="/Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div&gt;
  
          &lt;div id="top-bar"&gt;
  
              &lt;div class="page-full-width cf"&gt;
  
                  &lt;ul id="nav" class="fl"&gt;
  
                      &lt;li class="v-sep"&gt;&lt;a href="#" class="round button dark ic-left-arrow image-left"&gt;მთავარი
  
                          საიტი&lt;/a&gt;&lt;/li&gt;
  
                      &lt;li class="v-sep"&gt;&lt;a href="/home" class="round button dark home-left image-left"&gt;სახლი
  
                      &lt;/a&gt;&lt;/li&gt;
  
                      &lt;li class="v-sep"&gt;&lt;a href="#" class="round button dark menu-user image-left"&gt;შესული
  
                          ხართ როგორც: &lt;strong&gt;acid&lt;/strong&gt;&lt;/a&gt;
  
                          &lt;ul&gt;
  
                              &lt;li&gt;&lt;a href="#"&gt;ლომბარდის პროფილი&lt;/a&gt;&lt;/li&gt;
  
                              &lt;li&gt;&lt;a href="#"&gt;პარამეტრები&lt;/a&gt;&lt;/li&gt;
  
                              &lt;li&gt;&lt;a href="#"&gt;პაროლის შეცვლა&lt;/a&gt;&lt;/li&gt;
  
                              &lt;li&gt;&lt;a href="/logout"&gt;გასვლა&lt;/a&gt;&lt;/li&gt;
  
                          &lt;/ul&gt;
  
                      &lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="#" class="round button dark menu-email-special image-left"&gt;3 ახალი შეტყობინება&lt;/a&gt;&lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="#" class="round button dark menu-logoff image-left"&gt;გასვლა&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div id="header-with-tabs"&gt;
  
              &lt;div class="page-full-width cf"&gt;
  
                  &lt;a href="#" id="company-branding-small" class="fr"&gt;
  
                      &lt;img src="/Content/images/company-logo.png" alt="Blue Hosting" /&gt;&lt;/a&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div id="content"&gt;
  
              &lt;div class="page-full-width cf"&gt;
  
                  &lt;div class="side-menu fl"&gt;
  
                      &lt;h3&gt;
  
                          მთავარი მენიუ&lt;/h3&gt;
  
                      &lt;ul&gt;
  
                          &lt;li&gt;&lt;a href="#"&gt;დამატება/რედაქტირება&lt;/a&gt;
  
                              &lt;ul&gt;
  
                                  &lt;li&gt;&lt;a href="#"&gt;ფილიალები&lt;/a&gt;&lt;/li&gt;
  
                                  &lt;li&gt;&lt;a href="/client"&gt;კლიენტები&lt;/a&gt;&lt;/li&gt;
  
                                  &lt;li&gt;&lt;a href="#"&gt;მომხმარებლები&lt;/a&gt;&lt;/li&gt;
  
                                  &lt;li&gt;&lt;a href="details.aspx"&gt;კომპანიის დეტალები&lt;/a&gt;&lt;/li&gt;
  
                              &lt;/ul&gt;
  
                          &lt;/li&gt;
  
                          &lt;li&gt;&lt;a href="#"&gt;საწყობი&lt;/a&gt;&lt;/li&gt;
  
                          &lt;li&gt;&lt;a href="#"&gt;შემოსავლები&lt;/a&gt;&lt;/li&gt;
  
                          &lt;li&gt;&lt;a href="#"&gt;გაყიდვების ისტორია&lt;/a&gt;&lt;/li&gt;
  
                          &lt;li&gt;&lt;a href="#"&gt;ანალიზი&lt;/a&gt;&lt;/li&gt;
  
                      &lt;/ul&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="side-content fr"&gt;
  
                      &lt;div class="content-module"&gt;
  
                          &lt;div id="render-body"&gt;
  
                              &lt;h1&gt;
  
      ახალი კლიენტის დამატება&lt;/h1&gt;
  
  &lt;br /&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.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script src="/Scripts/jquery-1.4.4.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;link href="/Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
  
  
  
  &lt;form action="/client/Create" method="post"&gt;    &lt;table&gt;
  
          &lt;tr&gt;
  
              &lt;td&gt;
  
                  &lt;div class="editor-label"&gt;
  
                      &lt;label for="Firstname"&gt;სახელი&lt;/label&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="editor-field"&gt;
  
                      &lt;input class="text-box single-line" id="Firstname" name="Firstname" type="text" value="" /&gt;
  
                      &lt;span class="field-validation-valid" data-valmsg-for="Firstname" data-valmsg-replace="true"&gt;&lt;/span&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="editor-label"&gt;
  
                      &lt;label for="Lastname"&gt;გვარი&lt;/label&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="editor-field"&gt;
  
                      &lt;input class="text-box single-line" id="Lastname" name="Lastname" type="text" value="" /&gt;
  
                      &lt;span class="field-validation-valid" data-valmsg-for="Lastname" data-valmsg-replace="true"&gt;&lt;/span&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="editor-label"&gt;
  
                      &lt;label for="IsMale"&gt;სქესი&lt;/label&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="editor-field"&gt;
  
                      &lt;select class="list-box tri-state" id="IsMale" name="IsMale"&gt;&lt;option selected="selected" value=""&gt;Not Set&lt;/option&gt;
  
  &lt;option value="true"&gt;True&lt;/option&gt;
  
  &lt;option value="false"&gt;False&lt;/option&gt;
  
  &lt;/select&gt;
  
                      &lt;span class="field-validation-valid" data-valmsg-for="IsMale" data-valmsg-replace="true"&gt;&lt;/span&gt;
  
                  &lt;/div&gt;
  
              &lt;/td&gt;
  
              &lt;td&gt;
  
                  &lt;div class="editor-label" &gt;
  
                      &lt;label for="Birthdate"&gt;დაბადების თარიღი&lt;/label&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="editor-field"&gt;
  
                      &lt;input class="date" id="Birthdate" name="Birthdate" type="text" value="" /&gt;&lt;reference path="jquery-1.4.4.js" /&gt;
  
  &lt;reference path="jquery-ui.js" /&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function () {
  
          $(".date").click(function{
  
          alert('Boo')
  
          });
  
          $(".date").datepicker
  
              ({
  
                  dateFormat: 'dd/mm/yy',
  
                  showStatus: true,
  
                  showWeeks: true,
  
                  highlightWeek: true,
  
                  numberOfMonths: 1,
  
                  showAnim: "scale",
  
                  showOptions: {
  
                      origin: ["top", "left"]
  
                  }
  
              });
  
      });
  
  &lt;/script&gt;
  
  
  
                      &lt;span class="field-validation-valid" data-valmsg-for="Birthdate" data-valmsg-replace="true"&gt;&lt;/span&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="editor-label"&gt;
  
                      &lt;label for="PrivateNumber"&gt;პირადი ნომერი&lt;/label&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="editor-field"&gt;
  
                      &lt;input class="text-box single-line" id="PrivateNumber" name="PrivateNumber" type="text" value="" /&gt;
  
                      &lt;span class="field-validation-valid" data-valmsg-for="PrivateNumber" data-valmsg-replace="true"&gt;&lt;/span&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="editor-label"&gt;
  
                      &lt;label for="Address"&gt;მისამართი&lt;/label&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="editor-field"&gt;
  
                      &lt;input class="text-box single-line" id="Address" name="Address" type="text" value="" /&gt;
  
                      &lt;span class="field-validation-valid" data-valmsg-for="Address" data-valmsg-replace="true"&gt;&lt;/span&gt;
  
                  &lt;/div&gt;
  
              &lt;/td&gt;
  
              &lt;td&gt;
  
                  &lt;div class="editor-label"&gt;
  
                      &lt;label for="Phone1"&gt;ტელ. 1&lt;/label&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="editor-field"&gt;
  
                      &lt;input class="text-box single-line" id="Phone1" name="Phone1" type="text" value="" /&gt;
  
                      &lt;span class="field-validation-valid" data-valmsg-for="Phone1" data-valmsg-replace="true"&gt;&lt;/span&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="editor-label"&gt;
  
                      &lt;label for="Phone2"&gt;ტელ. 2&lt;/label&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="editor-field"&gt;
  
                      &lt;input class="text-box single-line" id="Phone2" name="Phone2" type="text" value="" /&gt;
  
                      &lt;span class="field-validation-valid" data-valmsg-for="Phone2" data-valmsg-replace="true"&gt;&lt;/span&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="editor-label"&gt;
  
                      &lt;label for="Email"&gt;ელ-ფოსტა&lt;/label&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="editor-field"&gt;
  
                      &lt;input class="text-box single-line" id="Email" name="Email" type="text" value="" /&gt;
  
                      &lt;span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"&gt;&lt;/span&gt;
  
                  &lt;/div&gt;
  
              &lt;/td&gt;
  
          &lt;/tr&gt;
  
      &lt;/table&gt;
  
      &lt;br /&gt;
  
      &lt;p&gt;
  
          &lt;input type="submit" value="დამატება" class="button round blue image-right ic-add text-upper" /&gt;
  
      &lt;/p&gt;
  
  &lt;/form&gt;&lt;div&gt;
  
      &lt;a href="/client"&gt;უკან დაბრუნება&lt;/a&gt;
  
  
  
  &lt;/div&gt;
  
  
  
                          &lt;/div&gt;
  
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div id="footer"&gt;
  
              &lt;p&gt;
  
                  &amp;copy; Copyright 2012 &lt;a href="#"&gt;Acid Labs 2011&lt;/a&gt;. All rights reserved.&lt;/p&gt;
  
              &lt;p&gt;
  
                  &lt;strong&gt;Lombard Admin Panel &lt;/strong&gt;V 1.0 &lt;a href="http://www.acidlabs.ge"&gt;Acid Labs&lt;/a&gt;&lt;/p&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>