sábado, 26 de noviembre de 2011

Datepicker con MVC 3 (Razor)

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 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 = "date"  }) 
} 

6.) En Visual Studio clic en Tools, Library Package Manager, Manager NuGet Packages.

Busque online: jquery.ui
Seleccione jQuery.UI.Widgets.Datepicker 



Esto agregar los siguientes archivos:


  • jquery.ui.core.js
  • jquery.ui.core.min.js
  • jquery.ui.datepicker.js
  • jquery.ui.datepicker.min.js


7.) Por ultimo agregue el archivo DatePickerReady.js en la carpeta Script


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


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

  <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")"  
        rel="stylesheet" type="text/css" /> 
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")"  
        rel="stylesheet"  type="text/css" /> 
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")"  
        rel="stylesheet" type="text/css" /> 

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")"  
        type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")"  
        type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")"  
        type="text/javascript"></script>



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

 <script src="@Url.Content("~/Scripts/jquery.ui.datepicker-es.js")"  
        type="text/javascript"></script>

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/



1 comentario:

Unknown dijo...

Muy buen tuto gracias!!