UDA-Utilidades de desarrollo de aplicaciones • UDA-Componentes RUP. Fecha http://uda-ejie.github.io/

1. UDA - Utilidades de Desarrollo de Aplicaciones
Componentes RUP – Fecha
Fecha: 22/11/2013 Referencia:
EJIE S.A.
Mediterráneo, 14
Tel. 945 01 73 00*
Fax. 945 01 73 01
01010 Vitoria-Gasteiz
Posta-kutxatila / Apartado: 809
01080 Vitoria-Gasteiz
www.ejie.es
UDA – Utilidades de desarrollo de aplicaciones by EJIE is licensed under a Creative Commons Reconocimiento-
NoComercial-CompartirIgual 3.0 Unported License.

2. Componentes RUP – Fecha ii/22
Control de documentación
Título de documento: Componentes RUP – Fecha
Histórico de versiones
Código: Versión: Fecha: Resumen de cambios:
1.0.0 06/06/2011 Primera versión.
1.0.1 18/07/2011 Correcciones en los números de versión de ficheros.
1.1.0 14/09/2011
Actualización de las versiones de las librerías
JavaScript subyacentes.
Añadido el apartado Integración con UDA.
1.2.0 14/12/2011
Nuevos métodos getRupValue y setRupValue para la
interacción con los demás componentes RUP.
Añadida la posibilidad de introducir conjuntamente
fecha y hora.
Actualizado el apartado Integración con UDA.
2.0.0 11/07/2012 Cambios de formato y correcciones ortográficas.
2.1.0 18/09/2012
Actualización de las versiones de las librerías
JavaScript subyacentes.
2.4.0 22/11/2013
Se distribuye la versión minimizada de los ficheros
javascript y de estilos de RUP.
Cambios producidos desde la última versión
Se distribuye la versión minimizada de los ficheros javascript y de estilos de RUP.
Control de difusión
Responsable: Ander Martínez
Aprobado por:
Firma: Fecha:
Distribución:

3. Componentes RUP – Fecha iii/22
Referencias de archivo
Autor:
Nombre archivo:
Localización:

4. Componentes RUP – Fecha iv/22
Contenido
Capítulo/sección Página
1. Introducción 5
2. Ejemplo 5
3. Casos de uso 5
4. Infraestructura 6
4.1. Ficheros 6
4.2. Dependencias 6
4.3. Versión minimizada 7
5. Invocación 7
6. Parámetros 7
7. Funciones 11
8. Eventos 13
9. Intervalos de fechas 14
10. Fechas múltiples 15
11. Fecha y hora 17
12. Interacción con teclado 18
13. Sobreescritura del theme 19
14. Integración con UDA 21

5. Componentes RUP – Fecha 5/22
1. Introducción
La descripción del Componente Fecha, visto desde el punto de vista de RUP es la siguiente:
Permite al usuario introducir y seleccionar una fecha, tanto de forma manual como visual, moviéndose
fácilmente por días, meses y años. Además, para minimizar las posibilidades de introducir una fecha
incorrecta, ofrece al usuario ayudas y sugerencias de formato.
Además, este sistema permite la introducción de fechas independiente de dispositivo y flexible, ya que
tanto los usuarios avanzados como los novatos podrán utilizarlo sin problemas.
2. Ejemplo
Se muestra a continuación una captura de un ejemplo típico del componente:
3. Casos de uso
Se recomienda el uso del componente:
• Cuando el usuario tenga que introducir una fecha y se quiera ofrecer flexibilidad para escribirla
manualmente o seleccionándola de un calendario.
• Cuando el usuario tenga que introducir un intervalo y se quiera ofrecer flexibilidad para escribirla
manualmente o seleccionándola de un calendario.

6. Componentes RUP – Fecha 6/22
4. Infraestructura
A continuación se comenta la infraestructura necesaria para el correcto funcionamiento del componente.
• Únicamente se requiere la inclusión de los ficheros que implementan el componente (js y css)
comentados en los apartados Ficheros y Dependencias.
4.1. Ficheros
Ruta Javascript: rup/scripts/
Fichero de plugin: rup.date-x.y.z.js
Ruta theme: rup/basic-theme/
Fichero css del theme: theme.rup.date-x.y.z.css
4.2. Dependencias
Por la naturaleza de desarrollo de los componentes (patrones) como plugins basados en la librería
JavaScript jQuery, es necesaria la inclusión del esta. La versión elegida para el desarrollo ha sido la
versión 1.8.0.
• jQuery 1.8.0: http://jquery.com/
La gestión de la ciertas partes visuales de los componentes, se han realizado mediante el plugin jQuery
UI que se basa en jQuery y se utiliza para construir aplicaciones web altamente interactivas. Este plugin,
proporciona abstracciones de bajo nivel de interacción y animación, efectos avanzados de alto nivel,
componentes personalizables (estilos) ente otros. La versión utilizada en el desarrollo ha sido la 1.8.23.
• jQuery UI 1.8.23: http://jqueryui.com/
Los ficheros necesarios para el correcto funcionamiento del componente son:
• jquery-1.8.0.js
• jquery-ui-1.8.23.custom.js
• jquery-ui-1.8.23.custom.css
• jquery-ui.timepicker.js
• jquery-ui.multidatespicker.js (fechas múltiples)
• rup.base-x.y.z.js
• rup.date-x.y.z.js
• theme.rup.date-x.y.z.css

7. Componentes RUP – Fecha 7/22
4.3. Versión minimizada
A partir de la versión v2.4.0 se distribuye la versión minimizada de los componentes RUP. Estos ficheros
contienen la versión compactada y minimizada de los ficheros javascript y de estilos necesarios para el
uso de todos los compontente RUP.
Los ficheros minimizados de RUP son los siguientes:
• rup/scripts/min/rup.min-x.y.z.js
• rup/basic-theme/rup.min-x.y.z.css
Estos ficheros son los que deben utilizarse por las aplicaciones. Las versiones individuales de cada uno
de los componentes solo deberán de emplearse en tareas de desarrollo o depuración.
5. Invocación
Este componente se invocará mediante un selector que indicará todos los elementos sobre los que se va a
aplicar el componente calendario. Por ejemplo:
$("#id_input").rup_date (properties);
Donde el parámetro “properties” es un objeto (var properties = {};) o bien directamente la declaración de lo
valores directamente. Sus posibles valores se detallan en el siguiente apartado.
6. Parámetros
A continuación se muestran los posibles parámetros de configuración que recibe el componente.
• datetimepicker: indica si el componente permite introducir la hora además de la fecha. Su
valor por defecto es false.
• disabled: indica si el componente debe aparecer deshabilitado o no. Su valor por defecto es
false.
• altField: identificador de un campo adicional para que muestre la fecha en otro formato. Por defecto
no se incluye.
• altFormat: formato que debe seguir la fecha en el campo adicional. Por defecto no se define.
• appendText: texto que se puede añadir detrás de cada campo de fecha. Por defecto no se define.
Se recomienda el uso del atributo “labelMaskId” que se detalla a continuación en lugar de este
atributo.
• labelMaskId: identificador del label que contendrá la máscara que indica el formato de la
fecha.

8. Componentes RUP – Fecha 8/22
• mask: texto empleado para la máscara de la fecha. Su valor por defecto se obtiene del
fichero de idioma.
• autoSize: booleano que indica si el campo para la fecha se tiene que redimensionar
automáticamente para adaptares al texto introducido. Su valor por defecto es false.
• buttonImage: ruta a la imagen que se muestra junto al campo de la fecha y que sirve para
desplegar el calendario pulsando sobre ella. Por defecto se muestra una imagen incluida en
los ficheros de RUP.
• buttonText: texto alternativo de la imagen que se muestra junto al campo de la fecha. Su
valor por defecto se obtiene del fichero de idioma.
• changeMonth: indica si se muestra un combo que en la cabecera que facilita el cambio de
mes. Su valor por defecto es true.
• changeYear: indica si se muestra un combo que en la cabecera que facilita el cambio de
año. Su valor por defecto es true.
• closeText: texto a mostrar en el botón que se muestra en el panel inferior (requiere el
activarlo mediante el atributo showButtonPanel) para cerrar el calendario. Su valor por
defecto se obtiene del fichero de idioma.
• currentText: texto a mostrar en el botón que se muestra en el panel inferior (requiere el
activarlo mediante el atributo showButtonPanel) para seleccionar la fecha actual en el
calendario. Su valor por defecto se obtiene del fichero de idioma.
• dateFormat: formato de la fecha a introducir (ej: dd/mm/yy para 20/01/2011). Su valor por
defecto se obtiene del fichero de idioma.
• dayNames: literales para los días [array]. Su valor por defecto se obtiene del fichero de
idioma.
• dayNamesMin: literales para los días (mínimos) [array]. Su valor por defecto se obtiene del
fichero de idioma.
• dayNamesShort: literales para los días (corto) [array]. Su valor por defecto se obtiene del
fichero de idioma.
• defaultDate: fecha que se muestra por defecto destacada cuando se abre el calendario y no
hay ninguna fecha escrita. El tipo de parámetro puede ser Date, String o Number (ver la
explicación al final de este apartado). Por defecto se destaca la fecha del día.
• duration: velocidad a la que aparece el calendario en pantalla (animación). Sus posibles
valores son: ‘slow’, ‘normal’ y ‘fast’ o un valor numérico (milisegundos). El valor por defecto
es normal.
• firstDay: número que indica en qué día de la semana debe empezar el calendario. El valor 0
equivale al domingo, el 1 al lunes y así sucesivamente. Su valor por defecto se obtiene del
fichero de idioma.
• hideIfNoPrevNext: oculta los enlaces de siguiente/anterior mes cuando no se puede
navegar. En caso contrario, los enlaces se deshabilitan. Su valor por defecto es false.

9. Componentes RUP – Fecha 9/22
• maxDate: fecha máxima que se puede seleccionar (límite superior). El tipo de parámetro
puede ser Date, String o Number (ver la explicación al final de este apartado). Por defecto
no hay límite.
• minDate: fecha mínima que se puede seleccionar (límite inferior). El tipo de parámetro
puede ser Date, String o Number (ver la explicación al final de este apartado). Por defecto
no hay límite.
• monthNames: literales para los meses [array]. Su valor por defecto se obtiene del fichero
de idioma.
• monthNamesShort: literales para los meses (corto) [array]. Su valor por defecto se obtiene
del fichero de idioma.
• nextText: literal a mostrar en el enlace de siguiente. Su valor por defecto se obtiene del
fichero de idioma.
• numberOfMonths: número de meses a mostrar. Puede definirse como un numérico (ej. 2) o
como un array indicando filas y columnas (ej. [2, 3]). Su valor por defecto es 1.
• prevText: literal a mostrar en el enlace de anterior. Su valor por defecto se obtiene del
fichero de idioma.
• selectOtherMonths: permite seleccionar los días del meses anterior/posterior del que se
muesta. Requiere que estén activos dichos días mediante el parámetro showOtherMonths.
Su valor por defecto es false.
• showAnim: indica el tipo de animación que se emplea para mostrar el calendario en
pantalla. Para más información ver los efectos de jQuery UI. Su valor por defecto es show.
• showButtonPanel: indica si se muestran los botones de la parte inferior (hoy y cerrar). Su
valor por defecto es false.
• showCurrentAtPos: cuando se muestra más de un mes, indica la posición que ocupa el
mes actual. Su valor por defecto es 0.
• showMonthAfterYear: intercambia la posición del mes y del año en la cabecera del
calendario. Su valor por defecto se obtiene del fichero de idioma.
• showOptions: objeto que determina las propiedades de la animación del calendario. Para
más información ver la siguiente página.
• showOtherMonths: indica si se muestran los días del mes anterior y posterior al que se
muestra. Su valor por defecto es false.
• showWeek: indica si se debe mostrar el número de semana. Su valor por defecto es
false.
• stepMonths: indica el número de meses que se avanzan al pulsar los enlaces
anterior/siguiente. Su valor por defecto es 1.
• weekHeader: literal que aparece sobre los números de semana. Su valor por defecto se
obtiene del fichero de idioma.

10. Componentes RUP – Fecha 10/22
• yearRange: determina el rango de años a mostrar en el combo de la cabecera del
calendario. No implica que sea el límite de años a seleccionar. Se debe definir como un
literal que indique el inicio y el fin separado por dos puntos ej. 2001:2011. Puede usarse el la
letra c como valor actual restándole y sumándole un numérico ej. c-10:c+10. Su valor por
defecto es c-10:c+10.
• yearSuffix: texto adicional a mostrar en la cabecera del calendario junto al año. Su valor por
defecto es vacío.
• noWeekend: indica si se muestran o no los días del fin de semana (sábado y domingo).
indica si se muestran los días del mes anterior y posterior al que se muestra. Su valor por
defecto es false.
• to y from: son lo atributos encargados de determinar el campo inicial y final en los
intervalos. Ver el apartado 11 donde se detalla los intervalos de fechas y su configuración.
• multiselect: atributo que indica si se permite la multiselección de fechas y el modo en el que
se aplica. Ver el apartado 10 donde se detallan las fechas múltiples.
En caso de configurar el componente para que permita la gestión de la hora junto con la
fecha (datetimepicker:true), los parámetros de configuración correspondientes a la gestión de
la hora, son los indicados en la guía de uso del componente hora.
Existen atributos que pueden recibir un Date, String o Number para especificar la fecha exacta. La
configuración se realiza a través de un objeto Date o con una cadena en formato de fecha actual
(determinado por el idioma), o un número de días a partir de hoy (por ejemplo, +7) o una cadena de valores
y puntos ('y' para años, 'm' para meses, 'w' para semanas, 'd' para días, por ejemplo, "+1m +7d '), o null para
hoy.
Para facilitar la manipulación de fechas, el fichero “rup.utils” incluye la función createDate (day,
month, year) que devuelve un objeto date. Un claro ejemplo de esta utilidad puede ser especificar la
fecha máxima o mínima seleccionable:
minDate: $.rup_utils.createDate(01, 01, 2011),
maxDate: $.rup_utils.createDate(31, 12, 2011)

11. Componentes RUP – Fecha 11/22
7. Funciones
A continuación se detallan las diferentes funciones que integran el componente fecha:
• destroy: elimina el componente de la pantalla. En caso de tener máscara también se restaura el
label con un texto vacío. A continuación se muestra un ejemplo de cómo invocar la función:
$(selector).rup_date("destroy");
• disable: deshabilita el componente en pantalla no pudiendo introducirse ninguna fecha ni se
despliega el calendario. A continuación se muestra un ejemplo de cómo invocar la función:
$(selector).rup_date("disable");
• enable: habilita el componente permitiendo introducir la fecha tanto mediante teclado como
mediante el desplegable del calendario. A continuación se muestra un ejemplo de cómo invocar la
función:
$(selector).rup_date("enable");
• isDisabled: indica si el componente se encuentra deshabilitado o no. A continuación se muestra un
ejemplo de cómo invocar la función:
$(selector).rup_date("isDisabled");
• hide: oculta el calendario para seleccionar una fecha. A continuación se muestra un ejemplo de
cómo invocar la función:
$(selector).rup_date("hide");
• show: muestra el calendario para seleccionar una fecha. A continuación se muestra un ejemplo de
cómo invocar la función:
$(selector).rup_date("show");
• getDate: devuelve la fecha seleccionada, si no se ha seleccionado nada devuelve vacío. A
continuación se muestra un ejemplo de cómo invocar la función:
$(selector).rup_date("getDate");
• setDate: establece la fecha del componente. El parámetro debe ser un objeto date. A continuación
se muestra un ejemplo de cómo invocar la función:
$(selector).rup_date("setDate", date);

12. Componentes RUP – Fecha 12/22
• refresh: refresca el calendario desplegado por si ha habido algún cambio. A continuación se
muestra un ejemplo de cómo invocar la función:
$(selector).rup_date("refresh");
• options: permite modificar alguno de los atributos del componente pasando el nombre de la
propiedad y su valor. A continuación se muestra un ejemplo de cómo invocar la función:
$(selector).rup_date("options", optionName, value);
• getRupValue: método utilizado para obtener el valor del componente. Este método es el utilizado
por el resto de componentes RUP para estandarizar la obtención del valor.
$(selector).rup_date("getRupValue");
• setRupValue: método utilizado para asignar el valor al componente. Este método es el utilizado por
el resto de componentes RUP para estandarizar la asignación del valor.
$(selector).rup_date("setRupValue",value);

13. Componentes RUP – Fecha 13/22
8. Eventos
A continuación se detallan los eventos asociados al componente:
• create: función que se lanza cuando se crea el calendario. La invocación es automática por parte
del componente.
$(selector).rup_date({ create: function(){...} });
• beforeShow: permite asociar una función que se ejecutará antes de que se muestre el calendario.
Los parámetros recibidos son el campo del calendario y la instancia del componente. La
configuración se realiza de la siguiente manera:
$(selector).rup_date({ beforeShow: function(input, inst){...} });
• onChangeMonthYear: permite asociar una función que se ejecutará cuando se cambie de mes o
de año en el calendario. Los parámetros recibidos son el año y mes seleccionados así como la
instancia del componente. La configuración se realiza de la siguiente manera:
$(selector).rup_date({onChangeMonthYear: function(y,m,inst){...} });
• onSelect: permite asociar una función que se ejecutará cuando se seleccione un valor del
calendario. Los parámetros recibidos son la fecha seleccionada (texto) y la instancia del
componente. La configuración se realiza de la siguiente manera:
$(selector).rup_date({ onSelect: function(dateText, inst){...} });
• onClose: permite asociar una función que se ejecutará cuando se oculte el calendario. Los
parámetros recibidos son la fecha seleccionada (texto) y la instancia del componente. La
configuración se realiza de la siguiente manera:
$(selector).rup_date({ onClose: function(dateText, inst){...} });

14. Componentes RUP – Fecha 14/22
9. Intervalos de fechas
El componente fecha permite la combinación de varios campos para poder permitir la selección de
intervalos. Una vez seleccionada por ejemplo la fecha de inicio (from) la fecha de fin (to) no podría ser
anterior a esta y viceversa. Esta gestión la realiza el componente internamente. A continuación se detalla un
ejemplo de cómo realizar la configuración para mostrar un intervalo de fechas:
1. Se deben declarar dos campos (input) que serán la fecha desde y la fecha hasta:
<input type="text" id="desde" />
<input type="text" id="hasta"/>
2. El componente se lanza sin ningún selector ya que requiere de los dos campos para establecer el
intervalo. Estos campos se indicarán mediante los atributos from y to:
$.rup_date({
from: "desde",
to: "hasta",
//Resto igual que en date
...
});
El resultado sería el que se muestra en la siguiente captura:

15. Componentes RUP – Fecha 15/22
10. Fechas múltiples
El componente fecha permite la multiselección de fechas en el caso de que el usuario deba seleccionar más
de una fecha sobre el mismo componente. Una vez seleccionadas, las fechas del componente aparecerán
separadas por comas en el campo asociado. Existen dos maneras de implementar la multiselección:
• número: mediante un valor numérico se indica la cantidad de fechas (máximas) que se pueden
elegir. Una vez seleccionadas todas las fechas permitidas, el calendario presentará los días
deshabilitados y no podrán seleccionarse más fechas hasta que se deseleccione alguna.
o Configuración:
$("#fecha_multi").rup_date({
multiSelect: 3,
...
});
o Ejemplo:
• array: mediante un array se indica un intervalo de días contiguos que se van a seleccionar. La
primera posición del array (número) indica el día en el que va a comenzar la selección, siendo cero
el día actual y permitiendo valores negativos. La segunda posición del array (número) indica la
posición del último día seleccionado. En este caso no se deshabilitan los días ya que permite
cambiar el intervalo de días seleccionados.
o Configuración:
$("#fecha_multi").rup_date({
multiSelect: [0,5],
...
});
o Ejemplo:

16. Componentes RUP – Fecha 16/22
No está soportada la combinación de los intervalos de fechas y la multiselección de fechas ya que son
funcionalidades completamente diferentes.
Dado que el componente encargado de la multiselección es un envoltorio (wrapper) del componente de
fechas estándar, puede que alguna de las propiedades descritas en las fechas no funcionen correctamente.

17. Componentes RUP – Fecha 17/22
11. Fecha y hora
El componente permite la gestión de un campo fecha en el que sea necesario incluir la hora. Para ello, se
combina el calendario, para la selección de fecha, con el selector de hora utilizado por el componente hora.
El aspecto del componente con esta configuración es el siguiente:
Este sería un ejemplo de la configuración que se debe indicar en la creación del componente:
var properties = {
datetimepicker:true,
showSecond: false,
timeFormat: 'hh:mm'
};
$("#id_input").rup_date (properties);
Como ya se ha comentado anteriormente, los parámetros de configuración correspondientes a la
gestión de la hora, son los indicados en la guía de uso del componente hora.

18. Componentes RUP – Fecha 18/22
12. Interacción con teclado
La interacción natural con el componente es mediante el ratón, pero se han añadido la posibilidad de
manipular los valores mediante el teclado para agilizar su uso lo que ahorra mucho tiempo a los usuarios
avanzados.
Cuando el campo asociado al componente recibe el foco se muestra el desplegable. En este momento si se
introduce una fecha (siguiendo el formato especificado) utilizando los números del teclado, el componente
actualiza el calendario con el valor introducido manualmente. Mediante flechas de dirección (←, ↑, →, ↓) se
puede desplazar el cursor a través del campo de fecha para modificarla, además de borrar ciertos valores
mediante las teclas suprimir y tecla de retroceso (backspace). Con la tecla escape se cerrará el desplegable.
Existen unos atajos de teclado para poder interactuar con el calendario directamente:
o CTRL + Flecha de dirección : Desplazar el selector de día (enter realiza la selección)
o Re Pág : Mes anterior
o Av Pág : Mes siguiente
o CTRL + SHIFT + Re Pág : Año anterior
o CTRL + SHIFT + Av Pág : Año siguiente

19. Componentes RUP – Fecha 19/22
13. Sobreescritura del theme
El componente date se presenta con una apariencia visual definida en el fichero de estilos theme.rup.date-
x.y.z.css.
Si se quiere modificar la apariencia del componente, se recomienda redefinir el/los estilos necesarios en un
fichero de estilos propio de la aplicación situado dentro del proyecto de estáticos
(codAppStatics/WebContent/codApp/styles).
Los estilos del componente se basan en los estilos básicos de los widgets de jQuery UI, con lo que los
cambios que se realicen sobre su fichero de estilos manualmente o mediante el uso de la herramienta
Theme Roller podrán tener repercusión sobre todos los componentes que compartan esos mismos estilos
(pudiendo ser el nivel de repercusión general o ajustado a un subconjunto de componentes).
Los estilos básicos configurables en la fecha son los siguientes:
.ui-datepicker-week-end a Fin de semana (Sábado y Domingo)
.ui-datepicker-today a Día actual
.ui-datepicker-calendar .ui-state-highlight a,
.ui-datepicker-current-day a Día seleccionado
Ejemplo base de la estructura generada por el componente (estructura interna que forma el calendario, no
se incluye el input sobre el que se aplica el componente):
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-
helper-clearfix ui-corner-all ui-helper-hidden-accessible">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-
corner-all">
<a class="ui-datepicker-prev ui-corner-all" title="Prev"><span
class="ui-icon ui-icon-circle-triangle-w">Anterior</span></a>
<a class="ui-datepicker-next ui-corner-all" title="Next"><span
class="ui-icon ui-icon-circle-triangle-e">Siguiente</span></a>
<div class="ui-datepicker-title">
<span class="ui-datepicker-month">Mayo</span>
<span class="ui-datepicker-year">2011</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end">
<span title="Lunes">Vi</span>
</th>
...
</tr>
</thead>

20. Componentes RUP – Fecha 20/22
<tbody>
<tr>
<td class="ui-datepicker-week-end ui-datepicker-other-month "> 1
</td>
...
</tr>
</tbody>
</table>
<div class="ui-datepicker-buttonpane ui-widget-content">
<button type="button" class="ui-datepicker-current ui-state-default
ui-priority-secondary ui-corner-all">Hoy</button>
<button type="button" class="ui-datepicker-close ui-state-default
ui-priority-primary ui-corner-all">Cerrar</button>
</div>
</div>
NOTA: Esta estructura podría variar algo en función de los atributos indicados en la configuración.

21. Componentes RUP – Fecha 21/22
14. Integración con UDA
Para facilitar la serialización/deserialización de los datos entre los objetos java y los componentes fecha,
desde UDA se proporcionan unas clases que definen tanto serializadores como deserializadores para el
componente Jackson utilizado en UDA.
Estas clases son utilizadas por las anotaciones @JsonSerialize y @JsonDeserialize de Jackson. Al
incluir estas anotaciones en los métodos setter y setter de los model se determina el modo en que Jackson
va a realizar la serialización y deserialización de estos tipos de datos.
• com.ejie.x38.control.JsonDateSerializer: Realiza la serialización de un tipo de dato Date en su
representación json correspondiente.
El valor json resultante solo contiene la información de la fecha, no así el de la hora. (dd/MM/yyyy).
En el proceso de serialización se tiene en cuenta el idioma utilizado por el usuario en la aplicación
para utilizar el formato correcto de la fecha. Un ejemplo de uso sería el siguiente:
@JsonSerialize(using = JsonDateSerializer.class)
public Date getFechaBaja() {
return this.fechaBaja;
}
• com.ejie.x38.control.JsonDateDeserializer: Realiza la deserialización de un objeto json que
contiene la representación de una fecha válida en un tipo de dato Date.
El objeto json debe contener una fecha válida de acuerdo al formato definido por la locale
correspondiente al idioma utilizado en la aplicación por el usuario. Este formado solo comprenderá la
parte de la fecha ignorando la hora. (dd/MM/yyyy).
Un ejemplo de uso sería el siguiente:
@JsonDeserialize(using = JsonDateDeserializer.class)
public void setFechaBaja(Date fechaBaja) {
this.fechaBaja = fechaBaja;
}
• com.ejie.x38.control.JsonDateTimeSerializer: Realiza la serialización de un tipo de dato Date en
su representación json correspondiente.
El valor json resultante contiene tanto la información de la fecha como la de la hora. (dd/MM/yyyy
HH:mm:ss).
En el proceso de serialización se tiene en cuenta el idioma utilizado por el usuario en la aplicación
para utilizar el formato correcto de la fecha. Un ejemplo de uso sería el siguiente:

22. Componentes RUP – Fecha 22/22
@JsonSerialize(using = JsonDateTimeSerializer.class)
public Date getFechaBaja() {
return this.fechaBaja;
}
• com.ejie.x38.control.JsonDateDeserializer: Realiza la deserialización de un objeto json que
contiene la representación de una fecha válida en un tipo de dato Date.
El objeto json debe contener una fecha válida de acuerdo al formato definido por la locale
correspondiente al idioma utilizado en la aplicación por el usuario. Este formado deberá comprender
tanto la fecha como la hora. (dd/MM/yyyy HH:mm:ss).
Un ejemplo de uso sería el siguiente:
@JsonDeserialize(using = JsonDateDeserializer.class)
public void setFechaBaja(Date fechaBaja) {
this.fechaBaja = fechaBaja;
}