Cómo mostrar la fecha actual con JavaScript (7 alternativas)

Si tienes un blog o un sitio web y deseas incluir la fecha y/o la hora actual, usa alguna de las siguientes alternativas, ordenadas de menor a mayor simpleza...

Insertar fecha básica (y hora opcional) con el formato dd/mm/aaaa

Este método es el más básico en cuanto a funcionamiento y resultado. La fecha aparecerá allí donde se incruste el código.

Ejemplo:

7/4/2025

Código:

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

Ejemplo con hora:

7/4/2025, 9:39:20

Código:

<script type="text/javascript"> var d = new Date(); document.write(d.getDate() + "/" + (d.getMonth() +1) + "/" + d.getFullYear(), ', '+d.getHours(),':'+d.getMinutes(),':'+d.getSeconds()); </script>

Insertar fecha con nombre del mes (y nombre del día opcional)

Ejemplo:

7 de Abril de 2025

Código:

<script type="text/javascript"> 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>

Versión con nombre del día de la semana:

Lunes 7 de Abril de 2025

Código:

<script type="text/javascript"> 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>

Opciones:

Pueden acortarse los nombres de los meses y días reemplazando "Enero" por "Ene", "Lunes" por "Lun", etc.

Mostrar fecha en hoja de calendario

Ejemplo:

2025

7

Abril

Código:

<style type="text/css"> .mifecha {background-color:#ff7800; padding:3px; width:110px; text-align:center; font-family:verdana, arial; font-size:12pt; border-radius:5px;} .mifecha .ano{background-color:#707070; color:#ffe3c1; padding:2px; font-size:100%; margin-bottom:3px; letter-spacing:2px; font-weight:bold;} .mifecha .dia{background-color:#4ba3d8; color:#1957c0; font-size:300%; padding:2px 8px 5px; margin-bottom:3px; font-weight:bold; text-shadow:1px 1px 1px #000;} .mifecha .mes{background-color:#707070; color:#ffe3c1; font-size:80%; padding:2px; font-weight:bold;} </style> <script type="text/javascript"> 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>

Opciones:

Pueden cambiarse los colores modificando los valores background-color y color. Con un poco de conocimiento acerca de CSS es posible cambiar la apariencia totalmente.

Mostrar fecha resaltada en calendario mensual

Ejemplo:

Abril de 2025

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Código:

<style type="text/css"> .mifecha2 {border:1px solid #ff7800; background-color:#fff; padding:3px 0px 5px 6px; text-align:center; font-family:verdana, arial; font-size:10pt; overflow:hidden; width:206px;} .mifecha2 .mesano{width:100%; padding:3px 3px 5px; font-weight: bold; clear:both; color:#4ba3d8;} .mifecha2 .dia, .mifecha2 .diaactual{width:20px; padding:3px; margin:3px 3px 0 0; background-color:#ffe3c1; float:left; text-shadow:none; font-size:11px;} .mifecha2 .diaactual{background-color: #ff7800; font-weight: bold; color:#fff;} </style> <script type="text/javascript"> 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] + ' de ' + 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>

Opciones:

Igual que antes, es posible cambiar la estética manipulando los estilos CSS.

Mostrar la hora actual en tiempo real

Finalmente, es posible hacer que la hora se actualice segundo a segundo, combinándola con los anteriores códigos...

Ejemplo:

9:39:21

Código:

<script type="text/javascript"> function startTime(){ today=new Date(); h=today.getHours(); m=today.getMinutes(); s=today.getSeconds(); m=checkTime(m); s=checkTime(s); document.getElementById('reloj').innerHTML=h+":"+m+":"+s; t=setTimeout('startTime()',500);} function checkTime(i) {if (i<10) {i="0" + i;}return i;} window.onload=function(){startTime();} </script> <div id="reloj"></div>