Datepicker con MVC (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/