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>Widget de Fecha Dinámica</title>
    
    <style>
        /* 
           PERSONALIZACIÓN RÁPIDA
           Modifica estos valores para cambiar el aspecto visual
        */
        :root {
            --bg-widget: #ffffff;      /* Fondo del widget */
            --bg-page: #f8fafc;        /* Fondo de la página */
            --text-main: #1e293b;      /* Color de la fecha numérica */
            --text-accent: #64748b;    /* Color del nombre del día */
            --border-color: #e2e8f0;   /* Color del borde sutil */
            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            --radius: 1rem;            /* Redondeado de esquinas */
            --font-size: 2.5rem;       /* Tamaño de la fecha */
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: var(--bg-page);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .date-card {
            background-color: var(--bg-widget);
            padding: 2.5rem;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            border: 1px solid var(--border-color);
            text-align: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
            max-width: 90%;
        }

        .date-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }

        #day-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--text-accent);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.5rem;
        }

        #date-display {
            display: block;
            font-size: var(--font-size);
            font-weight: 800;
            color: var(--text-main);
            line-height: 1;
        }
    </style>
</head>
<body>

    <main>
        <div class="date-card">
            <!-- Etiqueta para el nombre del día -->
            <span id="day-label">Cargando…</span>
            <!-- Etiqueta para la fecha numérica -->
            <span id="date-display">00/00/0000</span>
        </div>
    </main>

    <script>
        /**
         * Obtiene la fecha actual y actualiza el DOM con el formato local.
         */
        function refreshDate() {
            const now = new Date();

            // Configuramos el idioma y el formato
            const locale = 'es-ES';

            // Opciones para el nombre del día (ej: "Lunes")
            const dayStr = now.toLocaleDateString(locale, { weekday: 'long' });
            
            // Opciones para la fecha numérica (ej: "14/05/2026")
            const dateStr = now.toLocaleDateString(locale, {
                day: '2-digit',
                month: '2-digit',
                year: 'numeric'
            });

            // Seleccionamos los elementos y actualizamos su contenido
            const dayElement = document.getElementById('day-label');
            const dateElement = document.getElementById('date-display');

            if (dayElement && dateElement) {
                dayElement.textContent = dayStr;
                dateElement.textContent = dateStr;
            }
        }

        // Ejecutamos la función inmediatamente al cargar la página
        document.addEventListener('DOMContentLoaded', refreshDate);
    </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.

/* VARIABLES PERSONALIZABLES
   Cambia los valores aquí para ver cambios en todo el diseño
*/
:root {
    –bg-color: #1a1a2e;       /* Color de fondo del bloque de fecha */
    –text-color: #e94560;     /* Color de los números y letras */
    –accent-color: #0f3460;   /* Color del borde */
    –font-size-date: 2.5rem;  /* Tamaño de la fecha numérica */
    –font-size-day: 1.2rem;   /* Tamaño del nombre del día */
    –border-radius: 15px;     /* Redondeado de esquinas */
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f2f5; /* Color de fondo de la página completa */
    font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}

.date-container {
    background-color: var(–bg-color);
    color: var(–text-color);
    padding: 20px 40px;
    border-radius: var(–border-radius);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    text-align: center;
    border: 2px solid var(–accent-color);
    transition: transform 0.3s ease;
}

.date-container:hover {
    transform: scale(1.05); /* Efecto de aumento al pasar el ratón */
}

#day-name {
    font-size: var(–font-size-day);
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 5px;
    opacity: 0.8;
}

#full-date {
    font-size: var(–font-size-date);
    font-weight: bold;
    display: block;
}

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.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Widget de Fecha Personalizable</title>
    
    <!-- Enlazamos el archivo CSS externo para el diseño -->
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="date-container">
        <!-- Elemento donde se mostrará el nombre del día (ej: Lunes) -->
        <span id="day-name">Cargando…</span>
        
        <!-- Elemento donde se mostrará la fecha numérica (ej: 14/05/2026) -->
        <span id="full-date">00/00/0000</span>
    </div>

    <!-- Enlazamos el archivo JS externo para la funcionalidad -->
    <script src="script.js"></script>
</body>
</html>

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.

/**
 * Función que obtiene la fecha del sistema y la formatea
 */
function updateDate() {
    const now = new Date();
    
    // Configuración para el nombre del día (ej: «lunes»)
    const dayOptions = { 
        weekday: ‘long’ 
    };
    
    // Configuración para la fecha numérica (ej: «14/05/2026»)
    const dateOptions = { 
        day: ‘2-digit’, 
        month: ‘2-digit’, 
        year: ‘numeric’ 
    };

    // Convertimos la fecha a strings en español
    const dayName = now.toLocaleDateString(‘es-ES’, dayOptions);
    const fullDate = now.toLocaleDateString(‘es-ES’, dateOptions);

    // Actualizamos el contenido de los elementos HTML mediante su ID
    const dayElement = document.getElementById(‘day-name’);
    const dateElement = document.getElementById(‘full-date’);

    if (dayElement && dateElement) {
        dayElement.textContent = dayName;
        dateElement.textContent = fullDate;
    }
}

// Ejecutamos la función cuando el documento HTML ha sido cargado completamente
document.addEventListener(‘DOMContentLoaded’, updateDate);

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