Recientemente publiqué que había decidido usar Opera en mis demostraciones de HTML5 para RMOUG Training Days 2011. Como dije en esa publicación, una gran razón para agregar el navegador web Opera al conjunto que se está demostrando es que es compatible con algunas de las características de HTML5 mejor que los otros navegadores. Esta publicación ilustrará uno de estos casos: los Selectores de fecha HTML5.
Una de las cosas pequeñas pero agradables de usar Flex o una biblioteca de JavaScript como JQuery es la disponibilidad de mecanismos integrados para controles de entrada fáciles de usar. En particular, siempre se agradece un buen selector de fechas.
Actualmente, HTML5 está programado para ofrecer un widget selector de fecha estándar que se puede utilizar con etiquetas HTML. En esta publicación, miro el estado de los selectores de fechas HTML5 en las versiones recientes no beta de cinco navegadores web populares (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8 y Opera 11).
HTML admite varios campos de entrada a través de la etiqueta de entrada. Los diferentes tipos de campos de entrada se especifican mediante el atributo inputdel elemento type. HTML5 aumenta drásticamente la cantidad de correos typeelectrónicos disponibles que se pueden especificar. Varios de los nuevos valores para el typeatributo incluye los relacionados con la fecha / hora: date, datetime, datetime-local, month, week, y time. Cada uno de estos se ilustra en el siguiente fragmento de código HTML.
HTML5 Date Pickers Demonstrated
Input Type
Input Field
date
datetime
datetime-local
month
week
time
De los cinco navegadores web que enumeré anteriormente, Opera proporciona, con mucho, la implementación más sofisticada de las fechas y horas typede la inputetiqueta. Comenzando con lo positivo, las primeras instantáneas de pantalla muestran cómo se representa este HTML simple en Opera 11.
Opera 11 Representación inicial de la página
Atributo "fecha" de la etiqueta de entrada de Opera 11
Atributo "datetime" de la etiqueta de entrada de Opera 11
Atributo "datetime-local" de la etiqueta de entrada de Opera 11
Atributo "mes" de la etiqueta de entrada de Opera 11
La implementación de Opera destaca todo el mes que será seleccionado.
Atributo "semana" de la etiqueta de entrada de Opera 11
Opera destaca la semana que se seleccionará.
Atributo "tiempo" de la etiqueta de entrada de Opera 11
Opera 11 - Todos los campos de entrada seleccionados
La implementación de Opera de los campos de entrada de fecha / hora es impresionante. Ojalá se pudiera decir lo mismo de los otros navegadores no beta. Lamentablemente, los otros navegadores no brindan soporte para estos tipos de campo en ningún lugar cercano a este elegante. De hecho, no creo que valga la pena incluir aquí todas sus instantáneas de pantalla. En su lugar, simplemente muestro una captura de pantalla de cada uno después de completar todos los campos. En la mayoría de los casos, los navegadores simplemente trataron estos campos como simples campos de tipo "texto".
Selectores de fecha de Firefox 3.6: son solo texto
Selectores de fecha de Internet Explorer 8: son solo texto
Selectores de fecha de Safari 5: son solo texto con resaltado de enfoque
Selectores de fecha de Chrome 8: no del todo
Aunque no es tan elegante como el tratamiento de Opera de los campos de fecha / hora, el navegador Chrome trata estos campos como algo más que texto y limita lo que se puede ingresar en los campos. Desafortunadamente, no hay ventanas emergentes de selección de fecha / hora agradables como las que ofrece Opera. Aún así, el resaltado del campo enfocado es bueno y el hecho de que los datos seleccionados tengan un formato de fecha / hora ayuda.
Conclusión
Espero con ansias el día en que los principales navegadores admitan sistemáticamente controles de fecha / hora estandarizados, de modo que las simples etiquetas HTML de "entrada" con los atributos apropiados representen selectores de fecha / hora elegantes y estilísticos en cualquier navegador. Opera 11 actualmente lidera el grupo y proporciona la mejor ilustración de lo que podría ser.
Esta historia, "Selector de fechas HTML5", fue publicada originalmente por JavaWorld.
