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 algo generalizado.

Las funciones con las que se calcula la fecha actual por medio de programación en el cliente nos las ofrece la clase Date, que forma parte de cualquier navegador, por antiguo que sea. 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 momento, 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.

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 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>
let meses = new Array ("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre");
let 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>
let meses = new Array ("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre");
let diasSemana = new Array("Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado");
let 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>
.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>
let f=new Date();
let 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, con un aspecto como el que puedes ver en la siguiente imagen.

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>
.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>
let f=new Date();
let ano = f.getFullYear();
let mes = f.getMonth();
let dia = f.getDate();
let estiloDia;
let meses = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
let diasSemana = new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado");
let diasMes = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
let 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>

Creo que han sido unos cuantos ejemplos interesantes sobre trabajo con fechas en Javascript y sobre cómo visualizar las fechas en un documento HTML en distintos formatos. Seguramente con un poquito de esfuerzo podrás adaptarlos a tu web y al aspecto con el que quieres que se muestren las fechas del día actual. Como habrás comprobado, no hay mucho misterio y se trata de una práctica bastante simple.