feed twitter facebook LinkedIn facebook

JavaScript » Convertir una cadena a fecha en Javascript

enero 29, 2012 por Víctor Cuervo 3 Comentarios Imprimir Imprimir

En este ejemplo vamos a ver cómo podemos convertir una cadena a una fecha, es decir un elemento Date, en Javascript. A primeras parece que pensar que es algo tan trivial como pasarselo en la inicialización. Pero veremos que tenemos ciertas restricciones.

Y es que en el fondo, sí, podemos escribir la siguiente línea de código:

  1. var fecha = new Date("Sat, 4 Feb 2012");

Pero, ¿qué podemos utilizar como cadena de texto? Lo que podemos utilizar es todo aquello que podamos analizar mediante el método .parse() del objeto Date.

  1. Date.parse(cadena);

Y si miramos qué soporta el método .parse() veremos que el texto que le pasemos tiene que estar en formato RFC822 o ISO 8601. Así el método nos devolverá los milisegundos desde el 1 de enero de 1970.

Si no te apetece leerte que dicen los estándares RFC822 y ISO 8601 te lo resumiremos en que tienen que ser fechas en formato:

dia_semana, dia hora
yyyy-mm-dd

Y formatos similares. Así el 4 de febrero del 2012 podría declararse como:

Sat 4 Feb 2012 12:20:34
2012-02-04

Nosotros, para evitar formateos adicionales vamos a montar la fecha por nuestra cuenta, así que utilizaremos un formulario para pedirle al usuario los datos. El formulario será el siguiente:

  1. <label for="dia"><input type="text" id="dia" size="2" value="01"></label>/
  2. <label for="mes"><input type="text" id="mes" size="2" value="02"></label>/
  3. <label for="annio"><input type="text" id="annio" size="4" value="2012"></label><br/>
  4. <button id="calcular">Calcular Fecha</button>
  5. </form>

Y ahora, controlando el evento de pulsar sobre el botón, es decir, utilizando un addEventListener()

  1. var boton = document.getElementById("calcular");
  2. boton.addEventListener("click",function(ev){
  3. ...
  4. },false);

Vamos a componer nuestra fecha. Obtenemos los valores del formulario y componemos la fecha en formato yyyy-mm-dd

  1. dia = document.getElementById("dia").value;
  2. mes = document.getElementById("mes").value;
  3. annio = document.getElementById("annio").value;
  4. fecha_texto = annio+"-"+mes+"-"+dia;

Lo siguiente será parsearla y crear una fecha (aunque podríamos haber hecho solo lo segundo)

  1. ms = Date.parse(fecha_texto);
  2. fecha = new Date(ms);

Por último volcamos el contenido del Date a un campo y bloqueamos que se lance el evento del botón con .preventDefault() para poder ver el resultado y no enviar el formulario.

  1. document.getElementById("fecha").innerHTML = fecha;
  2. ev.preventDefault();

El código entero del manejador quedaría de la siguiente forma:

  1. var boton = document.getElementById("calcular");
  2. boton.addEventListener("click",function(ev){
  3.  
  4. dia = document.getElementById("dia").value;
  5. mes = document.getElementById("mes").value;
  6. annio = document.getElementById("annio").value;
  7.  
  8. fecha_texto = annio+"-"+mes+"-"+dia;
  9.  
  10. ms = Date.parse(fecha_texto);
  11. fecha = new Date(ms);
  12.  
  13. document.getElementById("fecha").innerHTML = fecha;
  14. ev.preventDefault();
  15.  
  16. },false);
Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre Javascript
Foro sobre Javascript
tags: , , , , , ,

Artículos relacionados:

3 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*