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

Question

I am using Model binding with 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?

Answer 1

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.

Answer 2

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

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.

Answer 3

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/

Answer 4

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

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%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.