¿Cómo se usa jQuery UI Datepicker con MVC's Html.TextBoxFor?

Question

Estoy utilizando el enlace de modelo con Entity Framework y tengo una entrada Html.TextBoxFor (model => model.date). Sé cómo decirle a jQuery cómo implementar un datepicker pero no en este contexto. ¿Qué necesitaría agregar aquí para tener una ventana emergente de calendario cuando el usuario ingresa a este campo?

Answer 1

Querrá utilizar la sobrecarga HtmlHelper que le permite especificar atributos Html. Luego, apúntalos con el selector de jquery.

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

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

Aunque recomiendo usar EditorFor en su lugar.

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

Se puede crear un EditorTemplate para manejar cualquier campo que es un DateTime y tienen que muestre el campo apropiado.

Crear /Views/Shared/EditorTemplates/DateTime.ascx y poner esto en él ...

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

O si lo necesita para permitir de DateTime con nulos:

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

entonces siempre se puede utilizar EditorFor y tener una central para ascx edite si alguna vez desea modificar la forma en que se manejan las fechas en sus vistas.

Answer 2

Desde el aspecto de la muestra de código (TextBoxFor) que está utilizando MVC2 ....

He aquí un ejemplo using MVC 2 que crea una plantilla que llamará al selector de fecha jQery cada vez que utilice una fecha & un segundo más in depth example.

Answer 3

Cree un EditorTemplate para el tipo DateTime y luego use EditorFor en lugar de TextBoxFor. La edición de plantilla debe ser un control de usuario llamado DateTime.ascx con el código de algo como:

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

Salida charla de Scott Hanselman sobre MVC 2 en el canal 9. http://channel9.msdn.com/posts/matthijs/ASPNET-MVC-2-Basics-Introduction-by-Scott-Hanselman/

Answer 4

me gustaría ir con un enfoque similar a Marc's. Aquí es mi propia versión de la misma:..

"%>

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

crear su EditorTemplates carpeta bajo la carpeta compartida y el nombre de DateTime.ascx