Selector de fechas HTML5

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.