5 formas de mostrar la fecha actual con Javascript

En este artículo vamos a mostrar varias formas de mostrar la fecha actual en una página web y que esta sea dinámica, de modo que siempre se muestre la fecha del día de hoy, sin que nosotros tengamos que hacer nada, ni actualizar la página ni ninguna otra tarea de mantenimiento.

La manera más fácil de hacer esto, que no tiene ningún requisito para su funcionamiento, ni en lo relativo al servidor donde esté la página, ni al navegador con el que accede el usuario, es con Javascript. Bueno, en realidad requiere que el usuario que visita nuestra página tenga un navegador compatible con Javascript, pero eso en el momento actual es lo más común.

Las funciones con las que se calcula la fecha actual por medio de programación en el cliente nos las ofrece la clase Date de Javascript, que forma parte de cualquier Javascript, por antiguo que sea el navegador. En el artículo de DesarrollolloWeb.com Clase date en Javascript para manejo de fechas ya se explicó cómo hacer nuestros propios códigos para obtener fechas en cualquier formato y con cualquier dato, lo que puede ser bueno para aprender las bases. En este artículo voy a dejar de lado las explicaciones y centrarme más en mostrar varios scripts, por separado, que nos pueden ayudar a crear una fecha con distintos formatos.

Podemos ver en una página aparte todos los ejemplos de visualización de la fecha actual que vamos a construir en este artículo.

Fecha básica con números

Podemos utilizar el siguiente script, para mostrar la fecha en español con números, es decir, en el formato como se escribe en nuestro idioma: dia/mes/año.

<script>
var f = new Date();
document.write(f.getDate() + "/" + (f.getMonth() +1) + "/" + f.getFullYear());
</script>

Este script de Javascript lo tenemos que colocar en el cuerpo de la página, en el lugar donde queremos que aparezca la fecha de hoy. Nosotros podremos colocar este script en cualquier contenedor donde queramos que aparezca, como un párrafo, una capa o división, una celda de una tabla, o donde deseemos.

Fecha con el nombre del mes

Podríamos desear poner la fecha escrita, donde aparezca el nombre del mes con letras, es decir, algo como "9 de noviembre de 2009". Esto quedaría bien si queremos darle un toque más prosaico a la visualización de la fecha actual. Se consigue con un script como este:

<script>
var meses = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
var f=new Date();
document.write(f.getDate() + " de " + meses[f.getMonth()] + " de " + f.getFullYear());
</script>

Como habrás podido comprobar, no tiene ninguna dificultad, pero tenemos que crear un array con los nombres de los meses en español, puesto que en Javascript no tenemos ninguna manera de conseguir esos nombres en nuestro idioma. Nuevamente, colocaremos el script en el lugar donde deseamos que aparezca escrita la fecha.

Fecha con nombre de més y nombre de día de la semana

Ahora vamos a darle una vuelta de trueca al anterior script para generar el nombre del día de la semana. El esquema sigue siendo el mismo, pero ahora necesitaremos otro array con los nombres de los días de la semana. Con este script conseguiremos una fecha escrita que será parecida a esta: "Lunes, 9 de Noviembre de 2009".

<script>
var meses = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
var diasSemana = new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado");
var f=new Date();
document.write(diasSemana[f.getDay()] + ", " + f.getDate() + " de " + meses[f.getMonth()] + " de " + f.getFullYear());
</script>

Fecha con estilos CSS

Ayudados de las Hojas de estilo en Cascada, vamos a mostrar la fecha con un poco de decoración gráfica. Para ello escribiremos la fecha en diversas cajas, a las que aplicaremos los estilos adecuados para que combine con el aspecto de nuestro sitio. En este caso vamos a requerir dos cosas:

• El script para escribir la fecha, que colocaremos donde queramos que aparezca.
• Código CSS con Las declaraciones de estilos, que podemos colocar antes de mostrar la fecha o bien junto con otras declaraciones de estilos que tengamos en nuestra página o en el fichero de estilos CSS.

<style type="text/css">
.mifecha {
   background-color: #999;
   padding: 3px;
   width: 110px;
   text-align: center;
   font-family:verdana, arial;
   font-size: 12pt;
}
.mifecha .ano{
   background-color: #339;
   padding: 2px;
   font-size: 100%;
   margin-bottom: 3px;
   color: #fff;
   letter-spacing: 3px;
   font-weight: bold;
}
.mifecha .dia{
   background-color: #99f;
   font-size: 300%;
   padding: 5px 8px;
   margin-bottom: 3px;
   font-weight: bold;
}
.mifecha .mes{
   background-color: #339;
   font-size: 80%;
   padding: 2px;
   color: #fff;
   font-weight: bold;
}
</style>

<script>
var f=new Date();
var meses = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
document.write('<div class="mifecha">');
document.write('<div class="ano">' + f.getFullYear() + '</div>');
document.write('<div class="dia">' + f.getDate() + '</div>');
document.write('<div class="mes">' + meses[f.getMonth()] + '</div>');
document.write('</div>');
</script>

Como decía, las declaraciones de estilos las he creado yo ahora como me ha parecido bien, pero vosotros tendríais que editar el código CSS para que la fecha tenga un aspecto que quede bien en vuestra página.

Con un mínimo de habilidades de Javascript y CSS estoy seguro que podréis alterar este código de manera que se pueda mostrar la fecha con otro aspecto y otra ordenación de los elementos.

Fecha creativa, con casillas para los días del mes y con el día actual remarcado

Por variar un poco este script para escribir el día de hoy en una web, he creado una forma de mostrar la fecha un poco más creativa. Utilizo un código de Javascript un poco más complejo, para generar los casilleros de todos los días del mes, resaltando el día actual. Da un aspecto similar a un calendario, pero bastante más simplificado.

Este script ya se complica un poco, básicamente porque tengo que meter algunas líneas de código para saber cuántos días tiene el mes actual, a fin de crear cada una de las casillas para cada uno de los días. Además, tendré que hacer una comprobación para saber cuál es el día actual y darle un estilo diferente. Como en el caso anterior, hacemos uso de un poco de CSS para decorar y estilizar los componentes de esta fecha.

<style type="text/css">
.mifecha2 {
   border: 1px solid #ddd;
   padding: 3px;
   text-align: center;
   font-family:verdana, arial;
   font-size: 10pt;
   overflow: hidden;
   width: 100%
}
.mifecha2 .mesano{
   float: left;
   padding: 3px;
   font-weight: bold;
}
.mifecha2 .dia, .mifecha2 .diaactual{
   width: 20px;
   padding: 3px;
   margin-left: 3px;
   background-color: #ddd;
   float: left;
}
.mifecha2 .diaactual{
   background-color: #999;
   font-weight: bold;
}

</style>
<script>
var f=new Date();
var ano = f.getFullYear();
var mes = f.getMonth();
var dia = f.getDate();
var estiloDia;
var meses = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
var diasSemana = new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado");
var diasMes = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var diaMaximo = diasMes[mes];
if (mes == 1 && (((ano % 4 == 0) && (ano % 100 != 0)) || (ano % 400 == 0)))
   diaMaximo = 29;
document.write('<div class="mifecha2">');
document.write('<div class="mesano">' + meses[mes] + ' ' + ano + ':</div>');

for (i=1; i<=diaMaximo; i++){
   if(i == dia)
      estiloDia = "diaactual";
   else
      estiloDia = "dia";
   document.write('<div class="' + estiloDia + '">' + i + '</div>');
}   
document.write('</div>');
</script>

Para terminar, dejo de nuevo el enlace a una página donde están todos los ejemplos de fechas creados en este artículo.