Google Chrome y el INPUT[TYPE=DATE]

Hace unos meses, cuando se lanzó la versión 20 de Google Chrome se comenzó a soportar la etiqueta Input con el type=”date” (característica de HTML5), esto debió haber sido por ahí del mes de Abril si la memoria no me falla. Sorpresivamente parece que aun varios desarrolladores no se han dado cuenta, pero otros no tardaron en mostrar cierto entusiasmo, entre ellos yo. Y creo que no es para menos, ya que aquellos que hemos batallado validando fechas en diversas plataformas, estarán de acuerdo que hacer esto puede llegar a ser un verdadero “pain in the ass”, y si por alguna razón, así como su servidor, han caído en la situación de tener que desarrollar aplicaciones o reportes destinados a finanzas sabrán el estrés que puede causar manejar fechas correctamente especialmente en estos rubros.

Casi de inmediato comencé a probar como funcionaba, y aunque a simple vista el uso de este “nuevo control” puede parecer simple, hay algunos detalles que no son tan obvios como se pudiera pensar en un principio. Efectivamente instanciar el calendario en una página no requiere más que colocar el valor date al atributo type en una etiqueta input, así el usuario podrá ver una pequeña flecha similar a la de un select y al hacer clic se desplegará el calendario nativo de HTML5 para Chrome. Hasta aquí todo bien, pero veamos cuales son los detalles menos obvios.

– El formato que devuelve el input

El formato que devuelve este control es aaaa-mm-dd (o yyyy-mm-dd si lo prefiere en inglés) NO IMPORTA el formato en que se despliegue, si utiliza algo como input.valueSIEMPRE obtendrá el resultado en ese formato.

–  El formato que acepta el input

Si le asigna un valor al input por código de la forma input.value, el valor SOLO aceptará el formato aaaa-mm-dd, de nuevo, NO IMPORTA el formato visual en el que se despliegue la fecha.

– ¿Cómo se envía el dato?

Cuando utiliza un método GET o POST para enviar información, el dato también se enviará en el formato aaaa-mm-dd.

– El formato local del sistema operativo afecta visualmente

Si leyó los puntos anteriores notará que mencioné “el formato en que se despliega”, así es, el formato visual se ve afectado, pero únicamente por el formato que esté utilizando el sistema operativo del cliente que despliega la página donde se encuentra el input:

– ¿Cómo se puede cambiar la apariencia del calendario emergente?

Tristemente NO es posible, por el momento no podemos modificar la apariencia del calendario, supongo que para permitir esto Google prefiere que antes se estandarice la creación del calendario per se, habrá que esperar para ver si esto sucede en el futuro (aunque no hay garantía de que ello ocurra tampoco), por el momento habrá que conformarse.

Puede dar un vistazo aquí y jugar un poco con el input[type=”date”].

IT professional with several years of experience in management and systems development with different goals within public and private sectors.

5 Comments

  1. Joan

    Oiga inge, tengo una pregunta, yo he estado usando el datepicker de jquery y me causa problemas cuando intento usar este, se enciman, ¿tiene idea de como solucionarlo?

    • Sí, lo que sucede es que hace tiempo el data picker de JQuery utilizaba el type=”date” para identificar donde colocar su “instancia”, pero desde hace tiempo puedes usar el type=”text” en su lugar, entonces solo hay que cambiarlo. Si checas los ejemplos actuales en la doc. oficial de JQuery verás que ahora usan el type=”text” como te menciono http://jqueryui.com/demos/datepicker/

  2. ale

    Hola,,, muy buena tu ayuda….. Sabes que tengo un problema?, necesito en PHP sumarle 2 dias a una fecha pasada atraves de un input type date para pasar ese dato a una base de datos,,,, Me podrias ayudar? Gracias

    • ale

      Resuelto

      si tenemos la fecha en una variable pasada atraves de un formulario lo hacemos asi

      $Fecha = $_POST[‘fecha_desde_input_tipo_date’];
      echo date(“m/d/Y”, strtotime(“$Fecha +1 month”));

Leave Comment

Your email address will not be published. Required fields are marked *

%d bloggers like this: