¿Cómo usar input type=»date» con Spring MVC?

Hemos tenido que esperar a HTML5 para que en HTML se contemplase el componente calendar!!!

En cualquier navegador HTML5 (incluido en mi querido Opera) cuando pongáis <input type=»date» name=»bday»>

Veréis

Que se renderiza:

(en navegadores no HTML5 veréis un componente texto)

En este post vamos a ver lo fácil que es manejar este componente desde Spring MVC, y como solemos hacer crearemos el proyecto Spring MVC con Spring Roo:

1. En una carpeta vacía arrancamos Spring Roo con cmd>roo.bat

2. Creamos el proyecto desde la consola de Roo:

Roo> project –topLevelPackage es.luismi.ejemplos.inputtypedate

3. Configuro persistencia en mi proyecto (para poder usar anotaciones JPA después):

Roo>persistence setup –provider HIBERNATE –database HYPERSONIC_IN_MEMORY

4. Damos al proyecto características Spring MVC:

Roo>web mvc setup

5. Creamos un controlador que capturará la petición:

Roo>controller class –class es.luismi.ejemplos.inputtypedate.PersonController –preferredMapping /person/

6. Creamos el proyecto de Eclipse para poder editar el controlador:

Roo>perform eclipse

Una vez tenemos creada la infraestructura lo que queremos hacer es enviar un formulario con unos datos mínimos de una persona:

De modo que el Controlador reciba estos datos en un FormBean (DTO) convirtiendo el campo input type=”date” en un Calendar.

(NOTA: En el ejemplo no estamos usando Tags para que se vea más claro el ejemplo).

7. En la JSP que se ha creado para el controlador en el proyecto $PROYECTO$srcmainwebappWEB-INFviewspersonindex.jspx añado esta parte:

<form:form method=»post» action=»/inputtypedate/person/createPerson» modelAttribute=»person»>

<table>

<tr>

<td>First Name</td>

<td><input type=»text» name=»firstName»/></td>

</tr>

<tr>

<td>Last Name</td>

<td><input type=»text» name=»lastName»/></td>

</tr>

<tr>

<td>Birthday</td>

<td><input type=»date» name=»birthday»/></td>

</tr>

<tr>

<td colspan=»2″>

<input type=»submit» value=»Add Person»/>

</td>

</tr>

</table>

</form:form>

Y xmlns:form=http://www.springframework.org/tags/form en la definición:

8. Creo el DTO Person (aprovechando las anotaciones @RooJavaBean y @RooToString que nos construyen automáticamente los métodos get y set y el método toString()):

9. Al atributo birthday debo darle una serie de anotaciones para que Spring MVC sea capaz de convertir el input type=”date” a un Date:

@Temporal(TemporalType.DATE)

@DateTimeFormat(iso = ISO.DATE)

private Date birthday;

10. En el controlador PersonController creo el método createPerson (el mismo nombre que el action de mi formulario) que será el que reciba la petición desde el formulario:

@RequestMapping(value = «/createPerson», method = RequestMethod.POST)

public String createPerson(@ModelAttribute(«person»)

Person person, BindingResult result) {

System.out.println(«First Name:» + person.getFirstName() +

«Last Name:» + person.getLastName() +

«Birthday:» + person.getBirthday()

);

return «person/index»;

}

11. Arranco la aplicación web (bien en mi Eclipse, bien a través de Maven con su plugin para Tomcat o Jetty,…), en mi caso la url es: http://localhost:8080/inputtypedate/