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:
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);
