Datepicker en MVC3 Razor

Question

Hola mi problema es como agregar un datepicker  en un @Html.editorfor() supongamos en este campo

@Html.EditorFor(model => model.HoraInicio)

he probado varios ejemplos y no funciona espero me puedan ayudar con ello.

Answer 1

Si model.HoraInicio es de tipo DateTime, entonces agregue una carpeta que se llame EditorTemplates dentro de la carpeta Views, y dentro de ella agregue una vista parcial que se llame DateTime.cshtml (o vbhtml, creo, para vb.net).  Luego edite la vista parcial a su gusto.  Normalmente se crea la vista parcial de forma que use el DatePicker de jQuery UI.

---

Jose R. MCP
Code Samples

Answer 2

Y si no quieres convertir todos los DateTimes en datepickers entonces lo que puedes hacer es: dentro de la carpeta EditorTemplates crea una vista parcial llamada como quieras (p.ej. DatePicker.cshtml).

Y en tu viewmodel decora la propiedad del tipo Datetime con la que quieras usar un datepicker con [UIHint]:

[UIHint("Datepicker")]
public Datetime FechaX {get; set;}

// "Datepicker" es el nombre de la vista parcial que has metido en EditorTemplates

Y si quieres hacer lo mismo para Html.DisplayFor es igual pero en la carpeta DisplayTemplates

Saludos!

---

Eduard Tomàs Blog: http://geeks.ms/blogs/etomas -- Twitter: eiximenis

Answer 3

Hola el rifas

Agregando algo a lo que te proponen Jose R y  Eduard Tomas

Aqui tienes un ejemplo donde implementa para todos los controles tipo Date (lo cual puedes hacer como propone Eduardo solo para los que necesitas asigndolo con UIHint). Utiliza jQuery UI donde ya tiene un DatePicker...

• ASP.NET MVC 3: Integrating with the jQuery UI date picker and adding a jQuery validate date range validator
  http://blogs.msdn.com/b/stuartleeks/archive/2011/01/25/asp-net-mvc-3-integrating-with-the-jquery-ui-date-picker-and-adding-a-jquery-validate-date-range-validator.aspx

Y otro ejemplo de presentaciones de ui personalizadas, por ejemplo un slider (articulo de Eduard Tomas)

• ASP.NET MVC: Enlazar una propiedad a jQuery UI Slider
  http://geeks.ms/blogs/etomas/archive/2011/10/22/asp-net-mvc-enlazar-una-propiedad-a-jquery-ui-slider.aspx

Yo utilizo la misma tecnica para varias cosas (ejemplo TimePicker)
Yo tengo en algunas aplicaciones la necesidad de editar tiempos (hora y minuto) por esta razon se guarda segun la DB como un tipo de dato Time o Datetime... no importa pero al fin y al cabo del lado de la app utilizo el TImePicker (http://jonthornton.github.com/jquery-timepicker/) y loimplemento de la misma idea que te estamos recomendando

Enlaces que te pueden ayudar

• UIHintAttribute (Clase)
  Especifica la plantilla o el control de usuario que los datos dinámicos usan para mostrar un campo de datos.
  http://msdn.microsoft.com/es-es/library/system.componentmodel.dataannotations.uihintattribute.aspx
  
• Quick Tips About ASP.NET MVC – Editor Templates
  http://blogs.msdn.com/b/nunos/archive/2010/02/08/quick-tips-about-asp-net-mvc-editor-templates.aspx

Espero que te sirva de ayuda o guia

---

Jose. A Fernandez | blog: http://geeks.ms/blogs/fernandezja