lunes, 22 de abril de 2013

Tips HTML5 – Control Calendario

Una de las novedades incluidas en HTML5 a sido una amplia variedad de controles de tipo gráfico, en este momento vamos a ver como usar el nuevo control calendario incluido en HTML5.

Este es básicamente un subtipo derivado del control input, y su uso es realmente sencillo.
<input type="date" id="cumpleanos" name="cumpleanos"/>
Como se puede observar es muy fácil de usar, desafortunadamente a la fecha aun no esta soportado por todos los navegadores, así que para facilitar las cosas adjunto una imagen de como se muestra el control en Chrome.

TestCalendario

Por otra parte, existen otros tipos de calendarios, los cuales nos permiten seleccionar la fecha y hora, semanas enteras y meses enteros, lo que en realidad me parece genial.

En el caso de fecha y hora cambiamos el tipo a datetime y listo:
<input type="datetime" id="citamedica" name="citamedica"/>
Este control luce así en Opera.

TestCalendarioDateTime

Si queremos seleccionar semanas completas solo cambiamos el tipo a week y listo.
<input type="week" id="vacaciones" name="vacaciones"/>
Este control luce así en Opera
TestCalendarioWeek

Y por ultimo los meses, para este caso cambiamos el tipo por month y ya podremos seleccionar mese completos.
<input type="month" id="capacitacion" name="capacitacion"/>
Este control luce así en Opera

TestCalendarioMonth

Como pueden ver son de gran utilidad y muy fáciles de usar, ahora con un poco de CSS de seguro que se logra una gran apariencia.

No hay comentarios: