sábado, 26 de noviembre de 2011

Datepicker con MVC 3 (Razor)

Publicadas por Carlos Juan a la/s 2:18 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 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/