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

<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

<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

<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

• 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.

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

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>