- Este artículo fue escrito por el ingeniero de software de Chrome, Kent Tamura.
Como habrás notado, Google Chrome admite un selector de fechas a partir de Chrome 20. Con solo establecer el atributo type del elemento input en date, el usuario puede hacer clic en el botón de flecha y Chrome mostrará un widget de calendario atractivo.
Dado que recibimos muchos comentarios de los desarrolladores, nos gustaría aclarar algunas cosas sobre cómo aprovechar al máximo el uso del selector de fecha en este artículo.
¿Cómo afecta la configuración regional al formato de fecha del valor de entrada?
Los usuarios pueden escribir un valor de fecha en el campo de texto de un elemento input[type=date] con el formato de fecha que se muestra en el cuadro como texto gris. Este formato se obtiene de la configuración del sistema operativo.
Los autores web no tienen forma de cambiar el formato de fecha porque actualmente no hay estándares para especificarlo.
¿Cómo se representa el valor de entrada cuando se envía un mensaje a un servidor?
El valor de fecha interpretado a partir de input[type=date] en la solicitud HTTP, como GET / POST, tendrá el formato yyyy-mm-dd.
¿Qué tipo de formato muestra el valor de entrada?
El elemento input.value siempre se muestra como yyyy-mm-dd, independientemente del formato de presentación.
¿Qué tipo de formato acepta el valor de entrada?
Cuando configuras input.value de manera programática, el valor solo acepta el estilo yyyy-mm-dd, independientemente del formato de presentación tanto para el valor inicial como para el valor insertado de JavaScript.
¿Cómo cambio la apariencia del selector de fecha?
Actualmente, no puedes aplicar diseño a la apariencia del selector de fecha. En WebKit, proporcionamos formas de diseñar controles de formularios con la propiedad CSS -webkit-appearance o el selector de pseudoclases ::-webkit-foo. Sin embargo, la ventana emergente del calendario no ofrece estas opciones en WebKit porque es independiente del documento, como un menú emergente para <select>, y actualmente no existe un estándar para controlar el estilo de sus elementos secundarios.
¿Cómo evito conflictos entre el selector de fecha de jQuery y el selector de fecha nativo?
Si probaste el selector de fechas de jQuery en input[type=date] en Google Chrome, es posible que hayas notado que se superponen calendarios tanto en la IU de jQuery como en la ventana emergente del calendario nativo.
Si deseas aplicar el selector de fecha de jQuery en todas las plataformas, usa input[type=text] en lugar de input[type=date]. No solo Google Chrome, sino también Safari de iOS, el navegador BlackBerry y Opera tienen su propia IU para input[type=date] y, actualmente, no hay forma de lograr una IU unificada en todas las plataformas que usan input[type=date].
Si quieres aplicar el selector de fecha de jQuery solo en plataformas que no admiten input[type=date], puedes usar Modernizr o el siguiente código:
var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}
if (!isDateInputSupported()) // or.. !Modernizr.inputtypes.date
$('input[type="date"]').datepicker();