Obtener la fecha de hoy en HTML

1. Usar la Función Date() de JavaScript para Obtener la Fecha Actual en HTML
2. Obtener la Fecha Actual en el Formato a/m/d en HTML
3. Obtener la Fecha Actual Utilizando el Método toLocaleDateString() de JavaScript en HTML
4. Formatear la Fecha Actual
5. Obtener la Fecha Actual Utilizando Moment.js

En el mundo digital de ritmo acelerado de hoy en día, donde la información se actualiza constantemente, mostrar la fecha actual en tu sitio web puede proporcionar a los visitantes un contexto valioso.

Ya sea que estés administrando un blog, un sitio de noticias o una plataforma de eventos, la fecha actual ayuda a los usuarios a comprender cuándo se actualizó o publicó por última vez la información.

Además, la fecha actual puede contribuir a una experiencia de usuario fluida al agregar una sensación de interacción en tiempo real.

Imagina un escenario en el que estás organizando una conferencia en línea internacional con asistentes de diferentes zonas horarias.

Mostrar el horario de la conferencia con la fecha y hora actual en la hora local de cada asistente puede asegurar que todos sepan cuándo tendrán lugar las sesiones, independientemente de su ubicación.

Usar la Función Date() de JavaScript para Obtener la Fecha Actual en HTML

Podemos usar la función Date() de JavaScript para obtener la fecha actual. La función devuelve la fecha y la hora actuales. Podemos crear un contenedor HTML y mostrar la fecha actual en él utilizando JavaScript. Utilizaremos la propiedad innerHTML para escribir la fecha en HTML.

Por ejemplo, crea un elemento div y establece current_date como su id. Luego, escribe código JavaScript dentro de la etiqueta script. Selecciona el elemento con el id current_id utilizando la propiedad getElementById y llama a la función Date(). Utiliza la propiedad innerHTML para escribir la fecha devuelta en HTML.

El ejemplo a continuación mostrará la fecha y hora actuales como se muestra en la sección de resultados a continuación. La salida contiene el día de la semana, el mes, el día, el año, la hora, el minuto, el segundo y la hora GMT, junto con información sobre la ubicación.

Código de ejemplo:

<div id="current_date">
    <script>
        document.getElementById("current_date").innerHTML = Date();
    </script>
</div>

Obtener la Fecha Actual en el Formato a/m/d en HTML

También podemos encontrar la fecha actual en el formato a/m/d utilizando varios métodos de la función Date() de JavaScript. Podemos obtener el año actual mediante el método getFullYear(), el mes actual mediante el método getMonth() y el día actual mediante el método getDate(). En este método, utilizaremos el objeto Date() para acceder a estas funciones diversas. Podemos formatear la fecha de la manera que deseemos y mostrarla en una página HTML utilizando la propiedad innerHTML.

Por ejemplo, crea un elemento div con el mismo id que en el método anterior. En JavaScript, crea un objeto date de la clase Date(). A continuación, crea tres variables: year, month y day. Utiliza el objeto date para llamar a los métodos getFullYear(), getMonth() y getDate() y almacena esos valores en las respectivas variables. Luego, utiliza el objeto document y llama a la propiedad getElementById para seleccionar el id del elemento div. Después, establece la propiedad innerHTML en las variables month, day y year, separadas por una barra diagonal.

De esta manera, podemos obtener la fecha actual en el formato m/d/a en HTML utilizando la clase Date() de JavaScript.

Código de ejemplo:

<div id="current_date">
    <script>
        date = new Date();
        year = date.getFullYear();
        month = date.getMonth() + 1;
        day = date.getDate();
        document.getElementById("current_date").innerHTML = month + "/" + day + "/" + year;
    </script>
</div>

Obtener la Fecha Actual Utilizando el Método toLocaleDateString() de JavaScript en HTML

Podemos utilizar la función toLocaleDateString() de JavaScript para obtener la fecha actual. La función toLocaleDateString() devuelve la fecha actual según el idioma proporcionado en la función. Existen diversas convenciones específicas del idioma y podemos definir el idioma con la función toLocaleDateString(). La función toma dos parámetros: locales y options. Podemos especificar el idioma de la salida mediante la opción locales. Por ejemplo, podemos usar en-US para el inglés estadounidense y en-GB para el inglés británico.

Por ejemplo, crea un elemento div y escribe código JavaScript dentro de la etiqueta script. Crea un objeto date de la clase Date() y llama al método toLocaleDateString(). Luego, utiliza document.write() para mostrar la variable date.

Podemos ver la salida en el formato m/d/a. Así, podemos usar el método toLocaleDateString() para obtener la fecha actual en HTML.

Código de ejemplo:

<div>
    <script>
        date = new Date().toLocaleDateString();
        document.write(date);
    </script>
</div>

Formatear la Fecha Actual

Si bien hemos explorado el formato a/m/d y el método toLocaleDateString(), ampliemos nuestros horizontes y exploremos una variedad de posibilidades de formato. Esto permitirá a los lectores tener una amplia gama de opciones para personalizar las visualizaciones de las fechas:

Mostrar el Nombre del Día

Para aumentar la comprensión del usuario de la fecha mostrada, considera incorporar el nombre del día. El método getDay() de JavaScript proporciona el día de la semana como un valor numérico (0 para domingo, 1 para lunes, etc.). Al mapear estos números a sus respectivos nombres de día, puedes presentar un resultado más informativo.

<div id="current_date">
    <script>
        const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        const date = new Date();
        const dayName = daysOfWeek[date.getDay()];
        document.getElementById("current_date").innerHTML = `${dayName}, ${date.toLocaleDateString()}`;
    </script>
</div>

Formato Legible por Humanos

Para una presentación de fecha natural y amigable para los humanos, podemos utilizar el método toLocaleDateString() con opciones adicionales para mostrar el mes y el día en un formato descriptivo.

<div id="current_date">
    <script>
        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        document.getElementById("current_date").innerHTML = new Date().toLocaleDateString('es-ES', options);
    </script>
</div>

Obtener la Fecha Actual Utilizando Moment.js

Moment.js, una ampliamente aceptada biblioteca de JavaScript diseñada para la manipulación de fechas y horas, ofrece una amplia variedad de opciones de formato. Esta flexibilidad facilita adaptar la visualización de fechas para que se ajuste perfectamente al diseño de tu sitio web.

Además del ejemplo mencionado anteriormente, exploremos algunas opciones de formato adicionales que proporciona Moment.js:

Formato Personalizado de la Fecha

Moment.js te permite crear un formato de fecha personalizado al organizar diferentes marcadores de posición. Por ejemplo, considera el siguiente código que muestra la fecha como AAAA-MM-DD:

<div id="current_date">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script>
        const formattedDate = moment().format('YYYY-MM-DD');
        document.getElementById("current_date").innerHTML = formattedDate;
    </script>
</div>

Tiempo Relativo

Moment.js te permite presentar fechas en un formato relativo y legible por los humanos, expresando intervalos de tiempo en términos como hace unos segundos, en 5 minutos o hace 2 días. Este enfoque añade una dimensión dinámica a la presentación de fechas, mejorando la sensación de inmediatez del usuario.

<div id="current_date">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script>
        const formattedDate = moment().fromNow();
        document.getElementById("current_date").innerHTML = `Última actualización: ${formattedDate}`;
    </script>
</div>

Formatos Localizados

Moment.js cuenta con amplias capacidades de localización que se adaptan a varios idiomas y preferencias culturales. Al especificar la localización deseada, puedes asegurarte de que la presentación de fechas cumpla con las convenciones de diferentes regiones.

<div id="current_date">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
    <script>
        // Establece la localización deseada
        moment.locale('es'); // Español

        const formattedDate = moment().format('LL'); // Muestra la fecha en el formato largo localizado
        document.getElementById("current_date").innerHTML = formattedDate;
    </script>
</div>

Tiempo de Calendario

Moment.js ofrece la capacidad de representar fechas como tiempo de calendario, proporcionando un contexto claro del día, el mes y el año.

<div id="current_date">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script>
        const formattedDate = moment().calendar();
        document.getElementById("current_date").innerHTML = `Fecha de hoy: ${formattedDate}`;
    </script>
</div>

Al aprovechar las capacidades de Moment.js, no solo puedes formatear la fecha de diversas maneras, sino que también puedes darle a tu visualización de fechas un carácter dinámico, específico del idioma y culturalmente relevante.

Esta biblioteca enriquece tu conjunto de herramientas al ofrecer una serie de funcionalidades que se adaptan a las sutilezas de la presentación de fechas en un contexto web.