Nuevo control de ingreso de fechas con calendario.

¿Cansado de recibir fechas que no tiene nada que ver con una fecha, o, como suele pasarnos a los latinos, recibir fechas dadas vuelta?.
Aquí les dejo un nuevo control para el ingreso de fechas que reduce la posibilidad de error a cero.


Como ustedes, a mi, desde que empecé a programar en la web, la fechas me han traído mas de un dolor de cabeza. Especialmente cuando vienen fechas que si bien validan como tal, están invertidas. Este tipo de error es el mas peligroso, ya que la fecha pasa todas las validaciones. Sin embargo el dato se terminará interpretando con mes como día y día como mes, lo que puede ocasionar muchos problemas.
Lo que intento con este control es, de una vez y para siempre, resolver todos los problemas de validación y formateo de fecha posibles, a la vez que brindo al usuario una manera cómoda y atractiva de ingresar fechas. Y, al hacer todo este procesamiento del lado del cliente, no se harían llamadas innecesarias al servidor, ahorrando además recursos y tiempo.

Este control es básicamente un Textbox que implementa la interface IScriptControl por lo tanto necesita de un ScriptManager presente en la página.
Se ha extendido su funcionalidad para que solo puedan ingresarse Fechas, anulando por lo tanto la posibilidad de teclear letras y símbolos.

Veamos un ejemplo :

<MM2:Fecha ID="Nacimiento" runat="server" RangoDesde="2012/12/10" RangoHasta="2013/01/01"
  AutoCompletar="Defecto" DiasProhibidos="Jueves" AceptaBlanco="true" IdFeriados="Feriados"
  Validando="ValidandoFecha" title="Ingrese fecha de nacimiento" Defecto="2012/12/10">
</MM2:Fecha>

Este ejemplo tiene alguna de las propiedades posibles de configurar en un control Fecha.

Paso a describir cada una:

Propiedad Tipo Descripción Defecto
RangoDesde Date Fecha desde la cual es válido seleccionar. Date.MinValue
RangoHasta Date Fecha hasta la cual es válido seleccionar. Date.MinValue
AutoCompletar TipoAutoCompletar Valor con el cual se autocompleta la fecha si el usuario deja en blanco el valor o parte de este. Nada
Defecto Date Fecha utilizada por la propiedad AutoCompletar cuando esta se encuentra con el valor “Defecto”. String.Empty
DiasProhibidos TipoDiaSemana Día/s de semana que no pueden ser seleccionados. Ninguno
AceptaBlanco Boolean Indica si el valor puede quedar en blanco o no. true
IdFeriados String Id del PorveedorDatosServidor que contiene las fechas que serán inhabilitadas para la selección. String.Empty
Validando String Nombre de la función en Javascript que será ejecutada al momento de validar. String.Empty
MensajeError String Texto que se presentará como tooltip cuando la fecha no sea válida. Fecha erronea
CssError String Estilo con el cual se presentará el control cuando la fecha no sea válida. Erroneo
ConCalendario Boolean Indica si presenta calendario emergente cuando se modifica la fecha. true
TipoAutoCompletar
Nada
Defecto
Hoy
TipoDiaSemana
Ninguno
Lunes
Martes
Miércoles
Jueves
Viernes
Sábado
Domingo

Si tuviéramos que especificar mas de un día de semana prohibido a la vez, deberíamos hacerlo en el evento Page_Init de la pagina de la siguiente manera:

  Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
    Me.Nacimiento.DiasProhibidos = Fecha.TipoDiaSemana.Lunes Or Fecha.TipoDiaSemana.Martes
  End Sub

En este ejemplo desactivamos los días lunes y martes de la selección.

Si quisiéramos programar el evento Validando para validar de forma personalizada el valor de la fecha, lo haríamos de la siguiente manera:

function ValidandoFecha(sender, e) {
  if (e.Valor.getTime() == new Date(2012, 11, 30).getTime())
    {
    e.Erroneo = true
    e.Mensaje = "- No puede ser 30/12/2012";
  }
}

En este ejemplo la fecha 30 de Diciembre de 2012 no podrá ser seleccionada. Si se escribe este valor en el control un mensaje de error con la leyenda “- No puede ser 30/12/2012” aparecerá como tooltip del control, y el estilo de este cambiará al estilo “Erroneo”.

La validación de este control se produce automáticamente cunado pierde el foco o cuando es asignado un valor a través del método set_value(). También puede forzarse la validación programáticamente invocando el método Validar().

Este control expone la propiedad “EsValido”, que indica si pasó la validación con éxito o no. Puede ser consultada en cualquier momento para conocer su estado y, por ejemplo, disparar alguna acción.

Con respecto a la configuración de los estilos visuales, aquí les dejo un ejemplo:


.Calendario
{
  border: 0px solid #9CBDD6;
  background-color: #EEF2F7;
  color: #5F95B6;
  font-family: Trebuchet MS, Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  width: 230px;
  height: 230px;
  margin-top:0px
}

.Calendario TABLE
{
  width: 100%;
  height: 100%;
}

.Calendario TABLE TR TD
{
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 20px;
  height: 20px;
  text-align: center;
}

.Calendario_CabeceraFecha
{
  background-color: #3D7AB8;
  color: #FFFFFF;
  font-weight: bold;
  white-space: nowrap;
  padding: 0px 8px 0px 0px;
}

.Calendario_CabeceraDias
{
  background-color: #3D7AB8;
  color: #FFFF99;
}

.Calendario_Dia
{
  border: thin solid #000000;
  background-color: #85ADD6;
  color: #FFFFFF;
  padding: 0px 0px 0px 0px;
}

.Calendario_Dia:hover
{
  border: solid 1px white;
  cursor: hand;
}

.Calendario_Inactivo
{
  background-color: #E0E0E0;
  color: #C0C0C0;
}

.Calendario_Hoy
{
  border: thin solid #000000;
  background-color: #FFE48A;
}

.Calendario_Hoy:hover
{
  border: solid 1px white;
}

.Calendario_Valor
{
    border: thin solid #000000;
    background-color: #FF6666;
    color: #FFFFFF;
}

.Calendario_Valor:hover
{
  border: solid 1px white;
}

.Calendario_DiaOtroMes
{
  border: thin solid #000000;
  background-color: #FFFFFF;
}

.Calendario_DiaOtroMes:hover
{
  border: solid 1px white;
  cursor: hand;
}

.Calendario_FinDeSemana
{
  border: thin solid #000000;
  background-color: #306192;
  color: #FFFFFF;
}

.Calendario_FinDeSemana:hover
{
  border: solid 1px white;
  cursor: hand;
}

El Calendario es un span con un table dentro. Teniendo en cuenta esto les dejo una imagen con las referencias de como configurar el estilo de cada elemento.

Como siempre aquí está la Librería MoniMisi2 para que se bajen con este control y todo lo desarrollado hasta ahora.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s