title: jquery-ui-timepicker-addon MVC4 no dropdown attached to textbox
body: <p>Can't get the jquery-ui-timepicker-addon dropdown to work with the MVC4 framework. I'm trying to wire-up up the time picker through the EditorTemplate to attach it to all nullable DateTime objects in my data model. The code gets to the script but no dropdown gets attached to the textbox. Any help would be appreciated been going at it for days. This example code: </p>
  
  <p>Model</p>
  
  <pre><code>public class MyDateModel
      {
  
              [Key]
              public int Date_ID { get; set; }
              public DateTime? DATE_APPOINTMENT { get; set; }
  
  
      }
  </code></pre>
  
  <p>context</p>
  
  <pre><code>public class DateContext:DbContext
      {
  
          public DbSet&lt;MyDateModel&gt; MyDateModels { get; set; }
  
          protected override void OnModelCreating(DbModelBuilder modelBuilder)
          {
  
              modelBuilder.Conventions.Remove&lt;PluralizingTableNameConvention&gt;();
  
          }
      }
  </code></pre>
  
  <p>View</p>
  
  <pre><code>@using (Html.BeginForm()) {
  
      @Html.ValidationSummary(true)
  
      &lt;fieldset&gt;
  
          &lt;legend&gt;MyDateModel&lt;/legend&gt;
  
          &lt;div class="editor-label"&gt;
  
              @Html.LabelFor(model =&gt; model.DATE_APPOINTMENT)
  
          &lt;/div&gt;
  
          &lt;div class="editor-field"&gt;
  
              @Html.EditorFor(model =&gt; model.DATE_APPOINTMENT)
  
              @Html.ValidationMessageFor(model =&gt; model.DATE_APPOINTMENT)
  
          &lt;/div&gt;
  
          &lt;p&gt;
  
              &lt;input type="submit" value="Create" /&gt;
  
          &lt;/p&gt;
  
      &lt;/fieldset&gt;
  </code></pre>
  
  <p>EditorTemplates</p>
  
  <p>DateTime.cshtml</p>
  
  <pre><code>@model Nullable&lt;System.DateTime&gt;
  
  @if ( Model.HasValue ) {
  
     @Html.TextBox( "" , String.Format( "{0:MM-dd-yyyy HH:mm}" , Model.Value ) , new  { @class = "textbox" , @style = "width:400px;" } )
  
  }
  else {
  
     @Html.TextBox( "" , String.Format( "{0:MM-dd-yyyy HH:mm}" , DateTime.Now ) , new { @class = "textbox" , @style = "width:400px;" } )
  
  }
  
  @{
  
  string name = ViewData.TemplateInfo.HtmlFieldPrefix;
  string id = name.Replace( ".", "_" );
  }
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $("#@id").datetimepicker();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Call scripts from _Layout.cshtml</p>
  
  <p></p>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;@ViewBag.Title - My ASP.NET MVC Application&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/themes/base/css", "~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
      &lt;link href="../../Content/themes/base/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="../../Scripts/jquery-ui-1.8.11.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;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;div class="content-wrapper"&gt;
              &lt;div class="float-left"&gt;
                  &lt;p class="site-title"&gt;@Html.ActionLink("Your logo here", "Index", "Home")&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="float-right"&gt;
                  &lt;section id="login"&gt;
                      @Html.Partial("_LoginPartial")
                  &lt;/section&gt;
                  &lt;nav&gt;
                      &lt;ul id="menu"&gt;
                          &lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt;
                          &lt;li&gt;@Html.ActionLink("About", "About", "Home")&lt;/li&gt;
                          &lt;li&gt;@Html.ActionLink("Contact", "Contact", "Home")&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;
      &lt;footer&gt;
          &lt;div class="content-wrapper"&gt;
              &lt;div class="float-left"&gt;
                  &lt;p&gt;&amp;copy; @DateTime.Now.Year - My ASP.NET MVC Application&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="float-right"&gt;
                  &lt;ul id="social"&gt;
                      &lt;li&gt;&lt;a href="http://facebook.com" class="facebook"&gt;Facebook&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://twitter.com" class="twitter"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  
      @Scripts.Render("~/bundles/jquery")
      @RenderSection("scripts", required: false)
  &lt;/body&gt;
  </code></pre>
  
  <p></p>