Generador de Fecha Dinámica para Web -

Generador de Fecha Dinámica para Web

Generador de Fecha Dinámica para Web ¿Quieres añadir la fecha actual a tu página web de forma rápida y sencilla? Con este script de JavaScript y CSS, puedes mostrar la fecha del día de manera dinámica y con un estilo personalizado que se adapta a tu diseño. Te mostramos cómo hacerlo con un código listo para usar y fácil de editar.

Dale un toque de dinamismo a tu sitio web. ¡Copia, pega y personaliza!

Descripción del Script Generador de Fecha Dinámica para Web

Este script es muy sencillo y funciona de la siguiente manera:

HTML: Creamos un elemento <div> con el ID fecha_actual. Este será el contenedor donde se mostrará la fecha.
JavaScript:
- Primero, definimos un objeto llamado opcionesFecha para especificar cómo queremos que se muestre la fecha (día de la semana, mes, año, etc.).
- Luego, creamos un nuevo objeto Date para obtener la fecha y hora actuales.
- Utilizamos toLocaleDateString('es-ES', opcionesFecha) para convertir la fecha en un formato de texto amigable en español.
- Finalmente, seleccionamos el elemento <div> por su ID y le insertamos el texto de la fecha formateada.
CSS:
- El código CSS se encarga de dar estilo al texto. Con él, puedes cambiar el tamaño de la fuente, el color, el estilo, y añadir efectos visuales como sombras o bordes redondeados.

Instrucciones para Utilizar el Script Generador de Fecha Dinámica para Web

Para poner este script en tu página web, tienes dos opciones:

Opción 1: Copiar y Pegar Directamente (Recomendado)

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fecha del Día</title>

<style>
    #fecha_actual {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Puedes cambiar la fuente */
        font-size: 28px; /* Tamaño del texto */
        color: #004d99;  /* Color del texto (azul oscuro) */
        font-weight: bold; /* Texto en negrita */
        text-align: center; /* Alineación del texto */
        padding: 20px; /* Espacio alrededor del texto */
        background-color: #f0f8ff; /* Color de fondo */
        border-radius: 10px; /* Bordes redondeados */
        box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* Sombra para un efecto 3D */
    }
</style>

</head>
<body>

    <div id="fecha_actual"></div>

    <script>
        // Opciones de formato para la fecha en español
        const opcionesFecha = {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        };

        // Obtener la fecha de hoy
        const fecha = new Date();

        // Formatear la fecha a un string legible
        const fechaFormateada = fecha.toLocaleDateString('es-ES', opcionesFecha);

        // Insertar la fecha en el elemento con el ID "fecha_actual"
        document.getElementById('fecha_actual').innerHTML = fechaFormateada;
    </script>

</body>
</html>

Copia todo el bloque de código HTML que está arriba.
Pega el código completo en tu archivo HTML. Puedes colocarlo en el lugar de tu página donde quieras que aparezca la fecha (dentro del <body>).
Si ya tienes una sección <head> y un <body>, solo tienes que copiar y pegar el bloque <style> en tu <head> y el bloque <div> y <script> en el <body>.

Opción 2: Usar Solo el Script y el CSS

Si tu página web ya está hecha, simplemente copia estos fragmentos en sus lugares correspondientes:

1- Copia el código CSS (<style>...</style>) y pégalo dentro de la etiqueta <head> de tu página.

<style>
    #fecha_actual {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Cambia la fuente aquí */
        font-size: 28px; /* Cambia el tamaño del texto */
        color: #004d99;  /* Cambia el color del texto */
        font-weight: bold; /* Pone el texto en negrita */
        text-align: center; /* Alineación del texto */
        padding: 20px;
        background-color: #f0f8ff;
        border-radius: 10px;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    }
</style>

2- Copia el código HTML (<div id="fecha_actual"></div>) y pégalo en el <body> de tu página, exactamente donde quieres que aparezca la fecha.

<div id="fecha_actual"></div>

3- Copia el código JavaScript (<script>...</script>) y pégalo al final del <body> de tu página, justo antes de la etiqueta </body>. Esto asegura que el script se ejecute cuando el resto de la página ya se ha cargado.

<script>
    const opcionesFecha = {
        weekday: 'long', // Muestra el día de la semana (e.g., "jueves")
        year: 'numeric', // Muestra el año (e.g., "2025")
        month: 'long',  // Muestra el nombre completo del mes (e.g., "julio")
        day: 'numeric'  // Muestra el día del mes (e.g., "31")
    };

    const fecha = new Date();
    const fechaFormateada = fecha.toLocaleDateString('es-ES', opcionesFecha);

    document.getElementById('fecha_actual').innerHTML = fechaFormateada;
</script>

¡Y eso es todo! El script se encargará automáticamente de mostrar la fecha del día en tu web.

Ejemplo de como se vería el Script copiando todo el bloque

Recuerda que puedes personalizarlo a tu gusto

Fecha del Día

👉 Más Utilidades para Tu web

Comparte esta información:

WhatsApp X (Twitter) Facebook Email Telegram