Obtener la fecha de hoy en HTML

HTML no incluye una visualización dinámica de la fecha. Usa JavaScript para crear un objeto Date, dar formato al valor para tus lectores y colocar el texto resultante en un elemento HTML. Un objeto Date representa un instante; métodos como getMonth() y toLocaleDateString() determinan cómo se presenta ese valor.

Mostrar la fecha y hora actuales con JavaScript en HTML

Usa new Date() cuando necesites un objeto Date y sus métodos. En cambio, llamar a Date() sin new devuelve de inmediato una cadena con la fecha y la hora, por lo que no puedes usarla con métodos como getFullYear(). Añade a la página un elemento con el ID current-date, selecciona ese mismo ID y establece su textContent:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<p>Current date and time: <span id="current-date"></span></p>
<script>
  const currentDate = new Date();
  document.getElementById("current-date").textContent = currentDate.toString();
</script>

Como el script aparece después del elemento, este ya existe cuando se ejecuta getElementById(). El valor mostrado depende de cuándo se ejecute el script y de la zona horaria local del equipo. Usa textContent para insertar texto simple con la fecha; así evitas que el valor se interprete como marcado HTML. Este ejemplo de una página en el navegador no se ejecuta mediante el runtime del artículo.

Para una introducción más amplia sobre cómo obtener el valor actual, consulta cómo obtener la fecha actual con JavaScript.

Dar formato a la fecha como mes/día/año en HTML

Para mostrar una fecha numérica al estilo de Estados Unidos, construye la cadena a partir de las partes de la fecha. getMonth() usa índices desde cero, así que suma 1 para obtener el número de mes convencional. getDate() devuelve el día del mes y getFullYear() devuelve el año. Este ejemplo usa una fecha fija para que sea fácil adaptar la lógica de formato; sustitúyela por new Date() para obtener la fecha local de hoy.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const page = { textContent: "" };
const document = { getElementById: () => page };
const date = new Date(2024, 0, 5);
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const year = date.getFullYear();
document.getElementById("current-date").textContent = `${month}/${day}/${year}`;
console.log(page.textContent);

El argumento del mes del constructor también empieza en cero: 0 significa enero. Añadir ceros iniciales mantiene los meses y días de un solo dígito en un formato uniforme de dos cifras. El orden month/day/year es una convención de presentación, no un formato universal; elige otro orden si se adapta mejor a tu público. Para ver más patrones de formato, consulta cómo dar formato a fechas con JavaScript.

Dar formato a una fecha según una configuración regional con toLocaleDateString()

Usa toLocaleDateString() para pedir al soporte de internacionalización del navegador una cadena con la fecha. Pasa una configuración regional, como en-US o en-GB, para solicitar explícitamente una convención, y añade opciones para controlar qué componentes aparecen. Si no especificas una configuración regional, el resultado puede depender del entorno del navegador y variar entre lectores.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const date = new Date(2024, 0, 5);
const options = { year: "numeric", month: "long", day: "numeric" };
const formatted = date.toLocaleDateString("en-US", options);
console.log(formatted);

Cambia la configuración regional a en-GB para solicitar las convenciones del inglés británico. El runtime determina el texto exacto y la puntuación a partir de sus datos regionales; no analices la cadena resultante como si tuviera una estructura fija. Usa toLocaleDateString() cuando busques un texto dirigido a lectores y adaptado a una región, en lugar de una fecha legible por máquinas.

Añadir el día de la semana o un formato de fecha legible

Puedes incluir directamente el día de la semana mediante el formato regional. Así evitas mantener por separado una matriz con los nombres de los días y permites que la configuración regional elegida determine el texto y el orden.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const date = new Date(2024, 0, 5);
const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
console.log(date.toLocaleDateString("en-US", options));

También puedes combinar las mismas opciones con otra configuración regional, como fr-FR, para obtener una fecha larga localizada. Si solo necesitas un valor numérico breve, omite weekday y usa opciones numéricas para el mes y el día. El texto formateado puede variar entre navegadores cuando cambian los datos regionales, incluso si se solicitan la misma configuración regional y las mismas opciones.

Usar Moment.js para obtener otros formatos de fecha y hora

Moment.js es una biblioteca opcional; no hace falta para mostrar fechas básicas. Carga Moment.js antes de llamar a su API e incluye sus datos regionales si vas a usar formatos localizados. Las siguientes llamadas son ilustrativas y requieren que la página incluya esa dependencia: moment().format("YYYY-MM-DD") da formato a una fecha de calendario; moment().fromNow() indica el tiempo relativo al instante actual; moment.locale("fr"); moment().format("LL") solicita un formato de fecha larga en francés cuando se han cargado los datos regionales de francés; y moment().calendar() elige el texto según lo próxima que esté la fecha al momento actual.

El tiempo relativo describe un intervalo, no la fecha de publicación o actualización de una página. No etiquetes moment().fromNow() como “Última actualización” a menos que el valor se base en una marca de tiempo de actualización guardada de verdad. Moment.js puede ser útil en proyectos existentes que ya la incluyen; para mostrar fechas sencillas, las API integradas de Date evitan añadir una dependencia.

Convertir una fecha a UTC con toUTCString()

Usa toUTCString() cuando una referencia horaria compartida sea más útil que la hora local del lector. Devuelve una representación en forma de cadena del valor de Date en UTC; no cambia el instante subyacente ni lo convierte a la hora local del lector.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const date = new Date("2024-01-05T12:30:00Z");
console.log(date.toUTCString());

Para obtener un valor dinámico, sustituye la marca de tiempo ISO fija por new Date(). La fecha UTC puede caer en un día del calendario distinto al de ese mismo instante en una zona horaria local. Elige el formato local para una fecha destinada al lector, el formato regional para seguir convenciones de una región y UTC cuando las personas necesiten comparar o compartir una referencia horaria uniforme. Consulta cómo convertir una fecha a UTC con JavaScript para obtener más información sobre UTC.