Home Northwind

sábado, 24 de noviembre de 2012

Datepicker con MVC 4 (Razor)

Publicadas por Carlos Juan a la/s 1:39 a.m.
El ejemplo final será:



El ejemplo aplicara a todos los tipos de datos de fecha: Ejemplo


[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }


Pero en este ejemplo no utilizaremos ya que lo realizaremos con Entity Framework.

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


2.)Le mostrara la pantalla de que tipo de aplicación (Internet o intranet), que tipo de motor quiere utilizar ASPX o Razor. Seleccione Internet Application y Use HTML 5 semantic Markup.



3.) En el Solucion explorer, presione clic derecho sobre la carpeta Models, nuevo elemento y luego en la ventana seleccione Ado Entity Data Model, con el nombre: NorthwindModel.edmx

 Seleccione las tablas: Orders, Customers, Employees










Antes de continuar compile el proyecto.

 4.) Presione Clic derecho sobre la carpeta de Controllers, luego add y por ultimo Controller....




Nombre: PedidosController
Template: Adding a controller with read/write actions and views, using Entity Framework 
Model Data Class: Orders (Nombre proyecto.Models)
Data Context class: NortwindEntities (Nombre proyecto.Models)
Views: Razor (cshtml)

5.) Agregando templates: 
5.1) Cree las siguientes carpetas,  View , shared 
DisplayTemplates
EditorTemplates
5.2) Cree el archivo display en la carpeta DisplayTemplates con el nombre DateTime


Agregue el siguiente código:

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

5.3) Cree el archivo Editor en la carpeta EditorTemplates con el nombre DateTime (ver paso 5.2)

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

*En MVC usamos:  type = "datestring"    Pero aquí le pondremos "string" para evitar que se confunda con html5 y no salgan los 2 calendarios.

 6.) Agregue el archivo DatePickerReady.js en la carpeta Script
$(function () {
    $(".datefield").datepicker();
});


8.) Agreguelas referencias a los jquery, en el archivo layout.cshtml localizada en view, share.

 
     @Styles.Render("~/Content/css") 

        @Styles.Render("~/Content/themes/base/jquery.ui.core.css") 
        @Styles.Render("~/Content/themes/base/jquery.ui.datepicker.css") 
        @Styles.Render("~/Content/themes/base/jquery.ui.theme.css") 
          



        @Scripts.Render("~/bundles/modernizr") 
        @Scripts.Render("~/bundles/jquery") 
        @Scripts.Render("~/bundles/jqueryui") 
        @Scripts.Render("~/Scripts/DatePickerReady.js") 
         
        @RenderSection("scripts", required: false)
Comente las siguientes lineas que están al final del layout.cshtml

@*@Scripts.Render("~/bundles/jquery") 
        @RenderSection("scripts", required: false)*@

 Si quieren que el picker este en español tienen que descargar de http://jqueryui.com/ las librerías de jquery y luego agregar el layourt.cshtml

 
        @Scripts.Render("~/Scripts/jquery.ui.datepicker-es.js")

Luego cambiar la función DatePickerReady.js por:
$(function () {
    $(".datefield").datepicker($.datepicker.regional[ "es" ] );
});


 Para cambiar los colores de su control ingrese a:
http://jqueryui.com/

No hay comentarios.:

Publicar un comentario

Suscribirse a: Comentarios de la entrada (Atom)