Fechas bonitas y funcionales en Javascript

Fechas bonitas y funcionales en Javascript

Creo que no me equivoco cuando pienso que todos los que construimos webs, nos hemos peleado con la fecha en varias ocasiones. En ocasiones tenemos que lidiar con fechas en el lado del servidor, cogiéndolas de bases de datos, transformándolas a un formato bonito a la vista y transportándolas al ordenador cliente en html o Javascript. Pero otras veces la fecha la recogeremos en el lado del cliente, o creando directamente la fecha por código, o capturándola a través de un input que el usuario tecleará o seleccionará de un calendario. Si es así, no tiene mucho sentido subir la fecha al servidor, tratarla, y descargarla de nuevo. Es mejor tratarla directamente en el ordenador cliente (salvo en excepciones, que no se me ocurre ninguna).

Javascript trata las fechas en formato TimeStamp de Unix, osea en milisegundos desde la medianoche del 1 de Enero de 1970. Pero a la vez es muy flexible, y nos permite poner la fecha en casi cualquier formato y lo reconocerá, que guay…

Y no solo eso, sino que hasta nos corrige, por ejemplo si guardas una fecha como “Jueves 26 de Enero de 2015” Javascript hace caso omiso a “Jueves” y si le pedimos que nos muestre el día de la semana de esa fecha nos dirá “Lunes”, que es el día correcto.

Si creas una fecha sin parámetros obtienes la fecha y hora actuales:

var fecha = new Date(); // Mon Jan 26 2015 04:36:10 GMT+0100

y con parámetros:

var fecha = new Date("2015-01-26");

var fecha = new Date("01-26-2015");

var fecha = new Date("01/26/2015");

var fecha = new Date("January 26, 2015");

De todas las formas anteriores obtenemos el mismo resultado:

fecha = "Mon Jan 26 2015 01:00:00 GMT+0100";

Pero… igual que digo una cosa, digo la otra. Hay algunas cosillas peculiares del objeto Date() de Javascript que en mi opinión son un poco “raritas”, aunque trabajan bien, y solo es cuestión de acostumbrarnos a ello, por ejemplo:

Si creas una fecha de la siguiente forma dará error:

var fecha = new Date("26-01-2015");

No hay forma de decirle que es en formato “DD-MM-AAAA”, solo admite el formato americano “MM-DD-AAAA”, o incluso lo admite con el año con 2 dígitos, pero eso sí, siempre en formato americano.

Cuando extraes el día de la semana de una fecha con el método .getDay(), el valor resultante es entre 0 y 6, siendo 0 Domingo, y 6 Sábado. Que yo sepa no hay posibilidad de decirle que el primer día de la semana es Lunes y empieza por 1.

Cuando extraes el mes de una fecha con el método .getMonth(), el valor resultante es entre 0 y 11, siendo 0 Enero, y 11 Diciembre. Y al igual que con el día de la semana, no hay la posibilidad de decirle que empieze a contar por 1 en vez de cero.

En cambio, cuando extraemos el día del mes y el año sí que trabaja como esperamos, el día del mes con el método getDate() da entre 1 y 31. Y el año igual, con el método getFullYear() da el año correcto en cuatro cifras.

Dicho todo esto, vamos a trabajar un caso práctico. Supongamos que tenemos una fecha en cualquier formato, siempre que sea válido claro, y lo tenemos que transformar en un formato bonito a la vista como “Lunes, 26 de Enero de 2015” para mostrarlo después. Vamos al lío.

var fecha_recibida = "2015-01-26"; // La fecha que recibimos en formato string.

Primero hay que hacer dos arrays, con los días de la semana y los meses en letra.

var dia_semana = new Array();
dia_semana[dia_semana.length] = "Domingo";
dia_semana[dia_semana.length] = "Lunes";
dia_semana[dia_semana.length] = "Martes";
dia_semana[dia_semana.length] = "Miércoles";
dia_semana[dia_semana.length] = "Jueves";
dia_semana[dia_semana.length] = "Viernes";
dia_semana[dia_semana.length] = "Sábado";

var mes = new Array();
mes[mes.length] = "Enero";
mes[mes.length] = "Febrero";
mes[mes.length] = "Marzo";
mes[mes.length] = "Abril";
mes[mes.length] = "Mayo";
mes[mes.length] = "Junio";
mes[mes.length] = "Julio";
mes[mes.length] = "Agosto";
mes[mes.length] = "Septiembre";
mes[mes.length] = "Octubre";
mes[mes.length] = "Noviembre";
mes[mes.length] = "Diciembre";

Luego convertimos fecha_recibida de string a tipo fecha.

var fecha = new Date(fecha_recibida);

Y seguimos con este código que creo que no hace falta explicar, lo comentaré.

var dia_sem_letras = dia_semana[fecha.getDay()]; // día de la semana.
var dia = fecha.getDate(); // día del mes.
var mes_letras = mes[fecha.getMonth()]; // mes.
var ano = fecha.getFullYear(); // año en cuatro dígitos.

Ya solo queda construir la fecha en el formato que queremos.

var fecha_formateada = dia_sem_letras + ", " + dia + " de " + mes_letras + " de " + ano; // "Lunes, 26 de Enero de 2015"

Y ya está, así de fácil. El código completo quedaría así:

var fecha_recibida = "2015-01-26"; // La fecha que recibimos en formato string.

var dia_semana = new Array();
dia_semana[dia_semana.length] = "Domingo";
dia_semana[dia_semana.length] = "Lunes";
dia_semana[dia_semana.length] = "Martes";
dia_semana[dia_semana.length] = "Miércoles";
dia_semana[dia_semana.length] = "Jueves";
dia_semana[dia_semana.length] = "Viernes";
dia_semana[dia_semana.length] = "Sábado";

var mes = new Array();
mes[mes.length] = "Enero";
mes[mes.length] = "Febrero";
mes[mes.length] = "Marzo";
mes[mes.length] = "Abril";
mes[mes.length] = "Mayo";
mes[mes.length] = "Junio";
mes[mes.length] = "Julio";
mes[mes.length] = "Agosto";
mes[mes.length] = "Septiembre";
mes[mes.length] = "Octubre";
mes[mes.length] = "Noviembre";
mes[mes.length] = "Diciembre";

var fecha = new Date(fecha_recibida);

var dia_sem_letras = dia_semana[fecha.getDay()]; // día de la semana.
var dia = fecha.getDate(); // día del mes.
var mes_letras = mes[fecha.getMonth()]; // mes.
var ano = fecha.getFullYear(); // año en cuatro dígitos.

var fecha_formateada = dia_sem_letras + ", " + dia + " de " + mes_letras + " de " + ano; // "Lunes, 26 de Enero de 2015"

Ahora supongamos que queremos pasar la fecha del formato “Lunes, 26 de Enero de 2015” a “2015-01-26”, para subirla al servidor y con PHP y MySql guardarla en una base de datos.

var fecha_recibida = "Lunes, 26 de Enero de 2015";

Empezamos por crear una Array con los meses en letra en la clave, y su número correspondiente en el valor.

var mes = new Array();
mes["Enero"] = "01";
mes["Febrero"] = "02";
mes["Marzo"] = "03";
mes["Abril"] = "04";
mes["Mayo"] = "05";
mes["Junio"] = "06";
mes["Julio"] = "07";
mes["Agosto"] = "08";
mes["Septiembre"] = "09";
mes["Octubre"] = "10";
mes["Noviembre"] = "11";
mes["Diciembre"] = "12";

Ahora con el método .split() dividimos la fecha poniendo un espacio en el patrón de busqueda.

var fecha_div = fecha_recibida.split(" ");

Nos quedará un Array con estos valores:

fecha_div[0] = "Lunes,";
fecha_div[1] = "26";
fecha_div[2] = "de";
fecha_div[3] = "Enero";
fecha_div[4] = "de";
fecha_div[5] = "2015";

Y seguimos con este código que creo que no hace falta explicar, lo comentaré.

var dia = fecha_div[1]; // día del mes.
var mes_letra = fecha_div[3]; // mes en letras.
var mes_numero = mes[mes_letra]; // mes en números, lo cogemos del Array mes.
var ano = fecha_div[5]; // año.

Ya solo queda construir la fecha en el formato que queremos.

var fecha_formateada = ano + "-" + mes_numero + "-" + dia; // "2015-01-26"

Ya estaría, el código completo quedaría así:

var fecha_recibida = "Lunes, 26 de Enero de 2015";

var mes = new Array();
mes["Enero"] = "01";
mes["Febrero"] = "02";
mes["Marzo"] = "03";
mes["Abril"] = "04";
mes["Mayo"] = "05";
mes["Junio"] = "06";
mes["Julio"] = "07";
mes["Agosto"] = "08";
mes["Septiembre"] = "09";
mes["Octubre"] = "10";
mes["Noviembre"] = "11";
mes["Diciembre"] = "12";

var fecha_div = fecha_recibida.split(" ");

var dia = fecha_div[1]; // día del mes.
var mes_letra = fecha_div[3]; // mes en letras.
var mes_numero = mes[mes_letra]; // mes en números, lo cogemos del Array mes.
var ano = fecha_div[5]; // año.

var fecha_formateada = ano + "-" + mes_numero + "-" + dia; // "2015-01-26"

Veremos ahora como comparar fechas en Javascript. Es tan fácil como comprobar si una fecha es menor, igual o mayor que otra.

var fecha_input = "2015-01-26"; // 26 de Enero de 2015.
var fecha_hoy = new Date(); // fecha del momento actual (hoy).

var f_input_ts = Date.parse(fecha_input); // Pasamos a milisegundos (TimeStamp)
var f_hoy_ts = Date.parse(fecha_hoy); // Pasamos a milisegundos (TimeStamp)

var resultado = "";
if (f_input_ts < f_hoy_ts) {
    resultado = "La fecha " + fecha_input + " del input es anterior a hoy";
} else if (f_input_ts == f_hoy_ts) {
    resultado = "La fecha " + fecha_input + " del input es hoy";
} else {
    resultado = "La fecha " + fecha_input + " del input aún está por llegar";
}

Este artículo se complementa con otro que hice del tratamiento de fechas en PHP, ya que entiendo que PHP y Javascript se complementan. Hay que programar en los dos lados del cable (allí en el cielo “PHP” como en la tierra “Javascript”) :)

Se acabó por hoy…

if (visitante == "amigo" || visitante == "amiga") {
    alert("Un abrazo.");
} else {
    alert("Un saludo.");
}
Si te ha gustado, lo puedes compartir.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>