Tips de Desarrollo Web

ASP.NET MVC por defecto valida muy bien los datos que proporcionan los usuarios, pero a veces cuando queremos realizar algo específico esto se puede tornar en un problema realmente complejo, es decir perdemos mucho tiempo tratando de resolverlo y terminamos por incrustar mucho código en nuestras aplicaciones que encontramos en internet (que funcione no significa que sea optimo). En este artículo vamos a ver una manera de validar los campos de fechas con el formato día/mes/año y no la manera por defecto mes/día/año. (Si conoces una mejor manera de hacerlo es totalmente bienvenida! )

Configurando nuestras propiedades de tipo DateTime

Mediante las anotaciones de datos proporcionamos el Formato de que tendrán las Fechas, tanto en la visualización como en la edición. Veamos un ejemplo:

1. [DisplayName("Fecha de Nacimiento"), Required(ErrorMessage="Debe ingresar su fecha de nacimiento.")]
2. [DisplayFormat(ApplyFormatInEditMode=true, DataFormatString="{0:dd/MM/yyyy}")]
3. public DateTime Birthday { get; set; }

Recordemos que si queremos validar la entrada de usuario con las Anotaciones de Datos desde el lado del Cliente y que la validación se realice con atributos de HTML5 y jQuery Validation de manera automática debemos tener configurado en nuestro archivo de Configuración Web.config lo siguiente:

Configurando nuestras Vistas con jQuery UI Datepicker y Masked Input

Como en la mayoría de navegadores el input de tipo date no es soportado vamos a emplear la librería jQuery UI para que podamos hacer uso de un bonito calendario y que nuestros usuarios puedan ingresar de una manera fácil y descomplicada las fechas, si no vamos a hacer más uso de esta librería podemos ir al Download Builder y seleccionar de todos los componentes el Widget Datepicker con el Tema que más nos guste.
Como habíamos visto al principio, el formato de fechas por defecto es diferente al que deseamos y para esto debemos agregar una nueva regla al jQuery Validation para que valide nuestro formato dd/mm/yy. Por último existe un Plugin que me gusta mucho utilizar y es Masked Input, este básicamente nos permite enmascarar nuestros input para que solo permitan ingresar manualmente el formato 99/99/9999 (Si por ejemplo el usuario no hace uso del Calendario y quiere escribir manualmente la fecha). Manos a la Obra!

• Descargamos el jQuery UI => http://jqueryui.com/download/
• Descargamos el Masked Input Plugin => http://digitalbush.com/projects/masked-input-plugin/
• Configuramos la Vista =>

 

Agregamos nuestro Javascript

1. @section Scripts {
2.     @Scripts.Render("~/bundles/jqueryval")
3.     <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
4.     <script src="~/Scripts/jquery.maskedinput.min.js"></script>
5.     <script>
6.         $("#Birthday").datepicker({ dateFormat: "dd/mm/yy" }).mask("99/99/9999");
7.         $.validator.addMethod('date',
8.         function (value, element, params) {
9.             if (this.optional(element)) {
10.                 return true;
11.             }
12.             var ok = true;
13.             try {
14.                 $.datepicker.parseDate('dd/mm/yy', value);
15.             }
16.             catch (err) {
17.                 ok = false;
18.             }
19.             return ok;
20.         });
21.     </script>
22. }

Para finalizar veamos como se vería en nuestro Navegador el ejemplo previamente realizado en este artículo.