0

Estoy desarrollando una aplicación web simple (Lista de tareas) en la que tengo un div para mostrar la fecha actual en el formato 'día de la semana, dia mes, año'. Estoy utilizando HTML, CSS y JavaScript para construir la interfaz, pero no estoy seguro de cómo puedo incorporar dinámicamente la fecha actual en mi página.Aprecio cualquier ayuda o consejo que puedan ofrecer. Gracias.

Este es mi html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista de Tareas</title>
    <link rel="stylesheet" href="./style2.css">
</head>
<body>
    <div class="container">
        <h1>Lista de Tareas📋</h1>
        <div id="fechaActual"></div>
        <div class="a">
            <form>
                <input type="text" placeholder="Agregar tarea...">
                <input type="time" id="hora">
                <button class="btn-add">➕</button>
            </form>
        </div>
        <div class="li-container">
            <ul>

            </ul>
            <button id="reset" onclick="reseteo()">Limpiar</button>
        </div>
        <div class="nada">
            <p>No tienes tareas pendientes.</p>
        </div>
    </div>
    <script src="./script.js" defer></script>
</body>
</html>

1 respuesta 1

1

Para obtener la fecha actual debes hacer:

const now = new Date();

Pero hay algo que debes entender, una cosa es el objeto Date y otra cosa es la representación "grafica" de la fecha, es decir lo que se muestra en la pantalla.

Un objeto Date cuenta con diversas funciones que te permiten manipular "fechas" como mostrarlas en distintos formatos

¿Por que es importante comprender esto?

Yo en este momento puedo tener las 6pm y tu las 12am, este problema se soluciona teniendo un punto en común (generalmente UTC-0), de esta manera puedes comparar eventos (tareas en tu caso) sin problema de la localización.

Entonces cada persona que haga const now = new Date(); obtendrá el mismo resultado no importa donde esté, por que Date trabaja en UTC-0

Demo

console.log(new Date())

De esta manera puede comparar fechas con localizaciones distintas.

Ahora, evidentemente que al usuario final se quiere mostrar la fecha de su localidad, este es un problema de "representación en pantalla"

Para eso puedes usar toLocaleString

const now = new Date();
console.log(  now.toLocaleString() );

O tambien puedes usar la API Intl.DateTimeFormat para mayor configuración en el formato

const now = new Date();

const now_string =  new Intl.DateTimeFormat('es-Es', {
    dateStyle: 'full',
    timeStyle: 'long',
    timeZone: 'Australia/Sydney',
  }).format(now);
  
console.log(now_string);


Por último para colocar la fecha desde javascript a html

//con este evento nos aseguramos que el DOM haya cargado antes de manipularlo
document.addEventListener("DOMContentLoaded", (event) => {
  const fecha = document.getElementById("fecha");
  const now = new Date();
  fecha.innerText = now.toLocaleDateString();
});
<div id="fecha"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.