In this blog it should be explained how to implement the jquery datepicker for all DateTime inputs. I fail miserably however when I try to follow the steps taken. I suspect that I am setting the references wrong somewhere, as there are now already newer (and diffverently named) .js files in my VS project than those mentioned in the blog. Is there a place where the implementation is spoon fed for the absolute jquery NOOB?
EDIT:
I also found this link. After copying in the code as mentioned I am greeted by an exception in jquery 1.5.1-min.js that says that the object doest not support that property or method...
EDIT(2)
I am at my wits' end wth this one, I tried to add the references Tridus suggested, but I have different versions and of some versions I have a .min.js alternative. All the relevant code:
In StandIn.cs:
[DisplayName("Available from")]
[DisplayFormat(DataFormatString="{0:d}",ApplyFormatInEditMode=true,NullDisplayText="(not specified")]
public DateTime? From { get; set; }
In Edit.cshtml:
<div class="editor-field">
@Html.EditorFor(model => model.Standin.From)
@Html.ValidationMessageFor(model => model.Standin.From)
</div>
In _Layout.cshtml:
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
In \Shared\EditorTemplates\DateTime.cshtml
@model Nullable<System.DateTime>
@if (Model.HasValue)
{
@Html.TextBox("", Model.Value.ToShortDateString(), new { @class = "date" })
}
else
{
@Html.TextBox("",string.Empty)
}
<script type="text/javascript">
$(document).ready(function () { $('.date').datepicker({ dateFormat: "dd/mm/yy" }); });
</script>
Mind: all the code performs without problems until I add the script tags: then on showing Edit.cshtml jquery-1.5.1.min.js throws an exception about a property or method not being supported.
This is a good place to start: http://jqueryui.com/demos/datepicker/
What you're almost certainly missing is just the script references to the right jQuery libraries. These need to be somewhere in the resulting HTML (either in the template for the DateTime object itself, or in your _layout.cshtml so it's just included everywhere). Adjust paths and versions accordingly for what you have in your project.
<script src="@Url.Content("~/Scripts/jquery-1.4.4.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.14.min.js")" type="text/javascript"></script>
If you have it, you probably also need a jQuery UI theme:
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
That's the only thing I didn't see in the blog post. Everything else really is as direct as they say.
I am getting more and more convinced that the problem lays with the .js files that are included with a default MVC3 project in Visual Studio 2010: they must lack some of the requiered dependent .js files. I went to the jquery ui site as suggested by Erik, downloaded the full jquery ui package and used the references and .js files from the default.html in the development-bundle/demo/datepicker folder. That works! However, as a VS MVC3 project comes with a lot of premade custom scripts I had to keep the downloaded .js files separate from those in the Scripts folder. Therefor I created a new JQueryScripts folder that I use for the UI elements. The references to these .js files cannot be added to _Layout.cshtml to avoid a conflict and I did not include the MasterPage (_Layout.cshtml) for the same reason.
For the record the resulting DateTime.cshtml EditorTemplate that works with a Nullable DateTime and shows how to implement localization for one language (Dutch in this case). Note that this code will be made obsolete with a new release of jquery(ui), but it gives an idea:
<link rel="stylesheet" href="../../../JQueryScripts/themes/base/jquery.ui.all.css"/>
<script type="text/javascript" src="@Url.Content("~/JQueryScripts/jquery-1.6.2.js")"></script>
<script type="text/javascript" src="@Url.Content("~/JQueryScripts/ui/jquery.ui.core.js")"></script>
<script type="text/javascript" src="@Url.Content("~/JQueryScripts/ui/jquery.ui.widget.js")"></script>
<script type="text/javascript" src="@Url.Content("~/JQueryScripts/ui/jquery.ui.datepicker.js")"></script>
<script type="text/javascript" src="@Url.Content("~/JQueryScripts/ui/i18n/jquery.ui.datepicker-nl.js")"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.datepicker').datepicker({
dateFormat: "dd-mm-yy",
minDate:0
});
});
</script>
@model Nullable<System.DateTime>
@if (Model.HasValue)
{
@Html.TextBox("", Model.Value.ToShortDateString(), new { @class = "datepicker" })
}
else
{
@Html.TextBox("", string.Empty, new { @class = "datepicker" })
}
