How do you use the jQuery UI Datepicker with MVC's Html.TextBoxFor?

I am using Model binding wi开发者_Python百科th the Entity Framework and have an Html.TextBoxFor(model =>model.date) input. I know how to tell jQuery how to implement a datepicker but not in this context. What would I need to add here to have a calendar popup when the user enters this field?

You'll want to use the HtmlHelper overload that allows you to specify Html attributes. Then target them with the jquery selector.

// in view
<%= Html.TextBoxFor(x => x.Date, new { @class="datepicker" })%>

// in js
$(document).ready({
         $('.datepicker').datepicker();
    });

Though I recommend using EditorFor instead.

<%= Html.EditorFor(x => x.Date)%>

You can create an EditorTemplate to handle any field that is a DateTime and have it output the proper field.

Create /Views/Shared/EditorTemplates/DateTime.ascx and put this in it...

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime>" %>    
<%= Html.TextBox("", Model.ToShortDateString(), new { @class="datepicker" } )%>

Or if you need to allow DateTime's with nulls:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>    
<%= Html.TextBox("", (Model.HasValue? Model.Value.ToShortDateString():""), new { @class="datepicker"} )%>

Then you can always use EditorFor and have a central ascx to edit if you ever want to modify the way date times are handled in your views.

From the looks of your code sample (TextBoxFor) you are using MVC2....

Here's an example using MVC 2 that creates a template that will call the jQery date picker whenever you use a date & a second more in depth example.

Create an EditorTemplate for the DateTime type and then use EditorFor instead of TextBoxFor. The edit template should be a user control called DateTime.ascx with code something like:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime>" %>
<%: Html.TextBox("", String.Format("{0:MM-dd-yyyy}", Model))%>
  <script type="text/javascript">
      $(document).ready(function () {
          $("#<%: ViewData.ModelMetadata.PropertyName %>").datepicker({
              changeMonth: true,
              changeYear: true,
              dateFormat: 'mm-dd-yy',
              showButtonPanel: true,
              gotoCurrent: true
          });
      });
  </script>

Check out Scott Hanselman's talk on MVC 2 on channel 9. http://channel9.msdn.com/posts/matthijs/ASPNET-MVC-2-Basics-Introduction-by-Scott-Hanselman/

I'd go with an approach similar to Marc's. Here's my own version of it:

<%string name = ViewData.TemplateInfo.HtmlFieldPrefix;%>
<%string id = name.Replace(".", "_");%>

<div class="editor-label">
    <%= Html.LabelFor(model => model) %>
</div>
<div class="editor-field">
    <%= Html.TextBox("", (Model.HasValue ? Model.Value.ToString("dd-MM-yyyy") : string.Empty), new { @class = "date" }) %>
    <%= Html.ValidationMessageFor(model => model)%>
</div>      

<script type="text/javascript">
    $(document).ready(function() {

        $("#<%=id%>").datepicker({
            showOn: 'both',
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            showOn: 'button', 
            buttonImage: '<%=Url.Content("~/Content/images/calendar.gif") %>'
        });
    });
</script>

create your EditorTemplates folder under the shared folder and name it DateTime.ascx.