Using the jquery datepicker in ASP.Net MVC3 projects

Question

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.

Erik A. Brandstadmoen · Accepted Answer · 2011-08-22 08:23:38Z

1

This is a good place to start: http://jqueryui.com/demos/datepicker/

answered Aug 22, 2011 at 8:23

Erik A. Brandstadmoen

10.6k2 gold badges42 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arcturus Over a year ago

Click the yellow bar, click enable, and see your datepicker in action!

Tridus · Accepted Answer · 2011-08-22 12:13:23Z

1

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.

answered Aug 22, 2011 at 12:13

Tridus

5,4011 gold badge22 silver badges20 bronze badges

2 Comments

Dabblernl Over a year ago

Hello Tridus, I keep getting the property or method not supported exceoption by jquery 1.5.1.min.js. I edited the question to inlcude all the releveant code. Somewhere there obviously is a wrong reference, but the paths are correct.

Tridus Over a year ago

Have you tried debugging in another browser? Firefox with Firebug might give you more idea about just what line is failing.

Dabblernl · Accepted Answer · 2011-08-23 07:15:41Z

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" }) 
}

Collectives™ on Stack Overflow

Using the jquery datepicker in ASP.Net MVC3 projects

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related