domingo, 4 de enero de 2015

Datepicker con MVC 5 (Razor)

Al final del post ya no tendremos dolores de cabeza con las fechas, ya que funcionara para todo el proyecto. 

Demo final del ejemplo.




1.) Crear el proyecto, File - New Proyect - ASP.NET MVC Web Applicaction 


2.) Seleccione el tipo de proyecto.





3.) En el Solucion explorer, presione clic derecho sobre la carpeta Models, luego seleccione Add y por ultimo "Ado Entity Data Model"





En la ventana agregue el nombre: NorthwindModel



En la ventana de Entity Data Model, seleccione EF Designer from Database




Seleccione las tablas: Orders, Customers, Employees


Antes de continuar compile su proyecto.


4.) Vamos a generar los controladores y vistas con scaffolding,  Presione Clic derecho sobre la carpeta de Controllers, luego "add" y por ultimo "Controller ..."





Seleccione el tipo de scaffold que necesita.




Complete la información del controlador como se indica en la imagen.





Si navegamos al controlador Order en la acción Create podrán notar que en el campo fecha es un simple input de texto.




Si observamos la vista, view --- Order --- Create  podemos observar que el campo de fecha fue generado como un campo normal, no debemos de tocar el este código ya que vamos agregar el datepicker con templates.






5.) Vamos agregar templates para el manejo de fechas.

5.1) Cree las siguientes carpetas en view ---- Shared


  • DisplayTemplates
  • EditorTemplates





5.2) Cree la vista "DateTime" dentro de la carpeta "DisplayTemplates" con el nombre DateTime. 

Clic derecho sobre a vista "DisplayTemplates" add y luego "View..."


Por ultimo completamos la vista agregando el nombre "DateTime", asegurese de seleccionar "Create as a partial view"





Abra el archivo "DateTime" de la carpeta "DisplayTemplates" y agregue el siguiente código


@model Nullable<DateTime> 
@(Model != null ? string.Format("{0:d}", Model) : string.Empty) 

Ahora vamos a repetir los pasos para la creación de la vista pero para la carpeta "EditorTemplates"


5.2) Cree la vista "DateTime" dentro de la carpeta "EditorTemplates" con el nombre DateTime. (Igual que el paso anterior)

Clic derecho sobre a vista "EditorTemplates" add y luego "View..." y agregue el nombre de "DateTime" asegurese de seleccionar "Create as a partial view"

 Ahora tendremos una vista parcial en cada carpeta con el nombre de "DateTime"




Ahora agregamos al archivo DateTime.cshtml de la carpeta "EditorTemplates" el siguiente código:


@model Nullable<DateTime> 

@{ 
    DateTime dt = DateTime.Now; 
    if (Model != null) 
    { 
        dt = (System.DateTime)Model; 

    } 
    @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), 
     new { @class = "datefield", type = "string" }) 
} 

Con estos cambios ya podremos ver todos los campos de tipo fecha con formato y cuando estén vacías se agregara le facha del día, esto aplica para todo el proyecto.





6.) Agregando el DatePicker

6.)1 Agregue el archivo DatePickerReady.js en la carpeta Script, para esto nos vamos a la carpeta script y seleccionamos "add" y por ultimo "javaScript File" 



Agregamos el nombre "DatePickerReady"


Abrimos el archivo DatePickerReady.js recientemente creado y agregamos el siguiente código.

$(function () { 
    $(".datefield").datepicker(); 
}); 



7.) Agregando las referencias.

7.1) Baje del sitio jqueryui.com los js y css, en la sección de "Download" queryui.com/download/

Después de descargar jqueryui debes copias los siguientes archivos a las siguientes carpetas.

jquery-ui.css --> Content
images --> Content
jquery-ui.js --> Script





7.2) Ahora abrimos el archivo _Layout.cshtml ubicado en View --> Shared en las secciones de:

Css ---- parte superior
js ---- parte inferior


@Styles.Render("~/Content/css") 
@Styles.Render("~/Content/jquery-ui.css") 
  
          



@Scripts.Render("~/bundles/modernizr") 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/Scripts/jquery-ui.js") 
@Scripts.Render("~/Scripts/DatePickerReady.js") 
         


Ejemplo de como se muestra el Datepocker


8.) Formato regional para las fechas, abre el archivo DatePickerReady.js y cambiarlo por el siguiente código:


$(function () { 
   
 //Array para dar formato en español 
$.datepicker.regional['es'] =  
{ 
    closeText: 'Cerrar',  
    prevText: 'Previo',  
    nextText: 'Próximo', 
   
    monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio', 
    'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun', 
    'Jul','Ago','Sep','Oct','Nov','Dic'], 
    monthStatus: 'Ver otro mes', yearStatus: 'Ver otro año',
    dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'], 
    dayNamesShort: ['Dom','Lun','Mar','Mie','Jue','Vie','Sáb'], 
    dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sa'], 
    dateFormat: 'dd/mm/yy', firstDay: 0, 
    initStatus: 'Selecciona la fecha', isRTL: false};


$(".datefield").datepicker($.datepicker.regional["es"]); 
});




Demo final del Datepicker




12 comentarios:

Giovany dijo...

Buenas explicaciones profe :D espero poder aprender mas del tema.

Maicol Rivero dijo...
Este comentario ha sido eliminado por el autor.
Maicol Rivero dijo...

Hola, Muy buen post, gracias!!!

Carlos Juan dijo...

Que bueno que les guste. Vamos a publicar mas.

Ángel dijo...

Hola buenas:
Gracias por el post.
No entiendo como quedan relacionadas las vistas parciales que se generan para el datapicker con los campos de fecha.
Te agradecería me lo indicaras.

Un saludo

Watson dijo...

hola excelente tutorial, solo que no me sale el calendario por mas que le busco no queda podria alguien indicarme que hago mal o que me falta

Fernando García dijo...

buenas tardes excelente explicacion me funciono al 100%, quisiera saber como puedo restringir los fines de semanas y festivos, los festivos los tengo en una tabla de una BD sql server quisiera relacionar la tabla con el datepiker. Saludos

Ronald Eduardo Ibarra Zapata dijo...

Excelentey muy util.
Gracias.

David Restrepo Zuluaga dijo...

Cuando voy a crear el ADO.net para la base de datos no me aparece la conexión que puedo hacer?

Punishermx dijo...

Muy bien explicado muchas gracias me ayudo

Unknown dijo...

Excelente de verdad mucgas gracias, muy bien explicado y concreto. Exitos!

Jhon Anderson Paneso dijo...

Buenos días yo tengo una pregunta como hago para que quede asociada mi vista donde quiero mostrar el campo fecha actual con estas otras vistas parciales que creamos.

porque así no me dio, lo único que necesito es que me cargue la fecha del sistema, no necesito datatimepicker. si me podrían ayudar muchas gracias