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:
Model
public class MyDateModel
{
[Key]
public int Date_ID { get; set; }
public DateTime? DATE_APPOINTMENT { get; set; }
}
context
public class DateContext:DbContext
{
public DbSet<MyDateModel> MyDateModels { get; set; }
protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
}
}
View
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>MyDateModel</legend>
<div class="editor-label">
@Html.LabelFor(model => model.DATE_APPOINTMENT)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.DATE_APPOINTMENT)
@Html.ValidationMessageFor(model => model.DATE_APPOINTMENT)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
EditorTemplates
DateTime.cshtml
@model Nullable<System.DateTime>
@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( ".", "_" );
}
<script type="text/javascript">
$(document).ready(function () {
$("#@id").datetimepicker();
});
</script>
Call scripts from _Layout.cshtml
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/themes/base/css", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link href="../../Content/themes/base/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">@Html.ActionLink("Your logo here", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
@Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
<div class="float-right">
<ul id="social">
<li><a href="http://facebook.com" class="facebook">Facebook</a></li>
<li><a href="http://twitter.com" class="twitter">Twitter</a></li>
</ul>
</div>
</div>
</footer>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
So I have found the answer. The trick is to call the script correctly in the _Layou.cshtml. Remove all of the the script calls from the body and place them in the header. Heres the code that works