DatePicker es un control conformado de un campo de texto y un calendario. Esto le da al usuario final la flexibilidad de escribir la fecha en el campo de texto o seleccionarla desde un calendario como el del post pasado. De hecho, muchas de las propiedades del DatePicker son para manejar el calendario de la misma manera en que manejamos el control Calendar.
Propiedades:
- BlackoutDates – Los dÃas en esta colección aparecerán tachados y no podrán ser seleccionados.
- DisplayDate – Indica una fecha que será visible al momento de desplegarse, sin importar la fecha que esté seleccionada actualmente
- DisplayDateStart y DisplayDateEnd – Indican el rango de fechas que serán visibles. Cualquier fecha fuera de este rango simplemente no aparecerá en el calendario.
- FirstDateOfWeek – Primer dÃa de la semana en el calendario (Sunday/Monday/Tuesday/Wednesday/Thursday/Friday/Saturday)
- IsDropDownOpen – Indica si el calendario esta abierto
- IsTodayHighlighted – Indica si queremos que el dÃa actual esté resaltado (True/False)
- SelectedDate – Fecha seleccionada
- SelectedDateFormat – Formato de la fecha
- Short – 27/07/2009
- Long - lunes, 27 de julio de 2009
- SelectionBackground – El color de fondo de la fecha seleccionada en el campo de texto
- Text – Contenido del campo de text
Eventos:
- CalendarClosed – Se dispara cuando el calendario se cierra
- CalendarOpened – Se dispara cuando el calendario se abre
- DateValidationError – Ocurre cuando el valor insertado en el campo de texto no puede ser interpretado como una fecha
- SelectedDatesChanged – Se dispara cuando se cambia de fecha(s)seleccionada(s)
Nuevamente, debemos comenzar por agregar la referencia System.Windows.Controls a nuestro proyecto. Además de ponerla en nuestro MainPage.xaml:
|
1 |
<span style="color: #800000">UserControl</span> <span style="color: #ff0000">xmlns:controls</span><span style="color: #0000ff">="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"</span> |
Para ejemplificar las distintas propiedades y eventos del DatePicker, vamos a contruir un pequeño control que nos permita escoger dos fechas para reservar un boleto de avión. Primero, usamos Blend 3 para hace rápidamente una pequeña interfaz de usuario:
A continuación vamos a escribir toda lafuncionalidad en el archivo de código de nuestro control, en este caso, MainPage.cs. Vamos a bloquear las fechas anteriores al dÃa actual:
|
1 |
<span style="color: #008000">//Bloqueamos las fechas pasadas</span> |
|
1 |
fechaSalida.BlackoutDates.AddDatesInPast(); |
|
1 |
fechaRegreso.BlackoutDates.AddDatesInPast(); |
Cuando se selecciona la fecha de Salida queremos asegurarnos de que la fecha de Regreso sea igual o mayor. Para esto, agregamos un delegado al evento SelectedDateChanged del DatePick de salida:
|
1 |
fechaSalida.SelectedDateChanged += |
|
1 |
<span style="color: #0000ff">new</span> EventHandler<SelectionChangedEventArgs>(fechaSalida_SelectedDateChanged); |
En dicho delegado reiniciamos el mensaje de error y las blackoutDates a los valores originales. Hacemos una validación para asegurarnos que si la fecha de Regreso ya habÃa sido seleccionada y es menor a la nueva fecha de Salida, será reseteada a nulo. Agregamos a la colección BlackoutDates un rango de fechas entre el dÃa actual y el dÃa de Salida seleccionado menos uno (para no excluirlo). Nótese el uso de GetValueOrDefault() para la propiedad SelectedDate, esto es debido a que dicha propiedad es de tipo DateTime?, osea que es Nullable, y queremos asegurarnos de obtener un valor válido:
|
1 |
<span style="color: #0000ff">void</span> fechaSalida_SelectedDateChanged(<span style="color: #0000ff">object</span> sender, SelectionChangedEventArgs e) |
|
1 |
{ |
|
1 |
<span style="color: #008000">//Reiniciamos mensaje de error</span> |
|
1 |
textoErrorSalida.Text = <span style="color: #006080">""</span>; |
|
1 |
  |
|
1 |
<span style="color: #008000">//Reiniciamos las BlackoutDates</span> |
|
1 |
fechaRegreso.BlackoutDates.Clear(); |
|
1 |
fechaRegreso.BlackoutDates.AddDatesInPast(); |
|
1 |
  |
|
1 |
<span style="color: #0000ff">if</span> (fechaSalida.SelectedDate > fechaRegreso.SelectedDate) |
|
1 |
{ |
|
1 |
fechaRegreso.SelectedDate = <span style="color: #0000ff">null</span>; |
|
1 |
} |
|
1 |
  |
|
1 |
<span style="color: #0000ff">if</span> (fechaSalida.SelectedDate == DateTime.Today) |
|
1 |
{ |
|
1 |
<span style="color: #008000">//No hacemos nada</span> |
|
1 |
} |
|
1 |
<span style="color: #0000ff">else</span> <span style="color: #008000">//Evitamos que la fecha de regreso pueda ser menor a la de salida</span> |
|
1 |
{ |
|
1 |
<span style="color: #008000">//Agregamos las necesarias</span> |
|
1 |
DateTime fechaSalidaActual = fechaSalida.SelectedDate.GetValueOrDefault(); |
|
1 |
CalendarDateRange rangoBlackout = |
|
1 |
<span style="color: #0000ff">new</span> CalendarDateRange(DateTime.Today, fechaSalidaActual.AddDays(-1)); |
|
1 |
fechaRegreso.BlackoutDates.Add(rangoBlackout); |
|
1 |
} |
|
1 |
} |
El siguiente paso es lidiar con fechas no válidas. Debido a que el usuario puede escribir cualquier cosa en el campo de texto, hay probabilidades de que la fecha escrita no pueda ser interpretada como fecha y por tanto debemos lidiar con ello. Agregamos los delegados de la siguiente manera:
|
1 |
fechaSalida.DateValidationError += |
|
1 |
<span style="color: #0000ff">new</span> EventHandler<DatePickerDateValidationErrorEventArgs>(fecha_DateValidationError); |
|
1 |
fechaRegreso.DateValidationError += |
|
1 |
<span style="color: #0000ff">new</span> EventHandler<DatePickerDateValidationErrorEventArgs>(fecha_DateValidationError); |
Y lidiamos con errores asÃ:
|
1 |
<span style="color: #0000ff">void</span> fecha_DateValidationError(<span style="color: #0000ff">object</span> sender, DatePickerDateValidationErrorEventArgs e) |
|
1 |
{ |
|
1 |
DatePicker pick = (DatePicker)sender; |
|
1 |
<span style="color: #0000ff">if</span> (pick == fechaSalida) |
|
1 |
{ |
|
1 |
textoErrorSalida.Text = <span style="color: #006080">"La fecha no es válida"</span>; |
|
1 |
} |
|
1 |
<span style="color: #0000ff">else</span> |
|
1 |
{ |
|
1 |
textoErrorRegreso.Text = <span style="color: #006080">"La fecha no es válida"</span>; |
|
1 |
} |
|
1 |
} |
Finalmente, lidiamos con otros detalles como el evento del botón, limpiar errores, etcétera. El resultado final pueden verlo aquà y puden bajarse la solución aquÃ.
Dudas y comentarios, no duden en contactarme.
¡Saludos!
4 comments
Oscar says:
Jan 3, 2011
Hola!
Me sirvio mucho el Articulo, solo me faltan 2 cosas, je
1. que haya 2 DatePciker y que el 2o no pueda tener la misma fecha o menor a la del primero
2. que la fecha limite o la ultima que muestre el datepicker, sea la actual, algo asi como “DisplaydateEnd=Now”?
me ayudarian mucho!
Gracias!!!
Arturo Molina says:
Jan 4, 2011
Que tal Oscar.
1. Puedes manejar ese caso de la misma manera que se maneja en el ejemplo de arriba (en el evento fechaSalida_SelectedDateChanged)
2. Puedes inicializar ese valor en el evento Loaded del control de Silverlight
Fernando says:
Jan 15, 2011
Hola, tengo una grilla que se alimenta de una BD, las celdas de una columna tienen en su interior un DatePicker. Necesito poder eliminar el borde del texo/fecha. Para conservar una estetica uniforme con toda la aplicacion. Ya puse borde 0, borde transparente, intene ponerle igual color que el fondo, padding 0, margin 0, etc. Pero no logro hacer que no se vea, siempre tengo un delgado recuadro.
Y como al validar, resalto el fondo si hay error, entonces se nota mucho. Ademas si la fila es par, tiene color de fondo gris y tambien se nota.
Alguna idea??
Gracias
Arturo Molina says:
Jan 24, 2011
Que tal Fernando. Te recomiendo usar Blend para editar el template del date picker. Es probable que algún elemento del template es el que tengas que modificar.