Linea de Codigo

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:

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.

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:

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

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

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

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

dia = document.getElementById("dia").value;
mes = document.getElementById("mes").value;
annio = document.getElementById("annio").value;
fecha_texto = annio+"-"+mes+"-"+dia;

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

ms = Date.parse(fecha_texto);
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.

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

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

var boton = document.getElementById("calcular");
boton.addEventListener("click",function(ev){
 
	dia = document.getElementById("dia").value;
	mes = document.getElementById("mes").value;
	annio = document.getElementById("annio").value;
 
	fecha_texto = annio+"-"+mes+"-"+dia;
 
	ms = Date.parse(fecha_texto);
	fecha = new Date(ms);
 
	document.getElementById("fecha").innerHTML = fecha;
	ev.preventDefault();
 
},false);