0
157
ViewsObtenga la fecha en la tienda css en js en un elemento creado js
Estoy aprendiendo Javascript y trato de crear una aplicación para hacer. Ingresé la tarea y la fecha. Quiero tener una lista con cada tarea y su fecha asignada. ¿Se puede hacer esto solo con HTML/Javascript, eligiendo la fecha con un HTML?
Aquí está el código:
<div class="task"> <form> <input type="text" class="in-text" /> <input type="date" class="in-date" /> </form> </div> <div class="todo-container"> <ul class="todo-list"></ul> </div> const todoInput = document.querySelector(".in-text"); const todoDate = document.querySelector(".in-date"); document.addEventListener("keyup", addTodo); function addTodo(e) { e.preventDefault; const newTodoDiv = document.createElement("div"); const newTodoElement = document.createElement("li"); newTodoElement.innerText = todoInput.value; newTodoDiv.appendChild(newTodoElement); //HERE IS SOME OF WHAT I THOUGHT IT WOULD BE DONE LIKE const newTodoDate = document.createElement("date");//i know date can`t be used like this newTodoDiv.appendChild(newTodoDate); } 
·
Juan Pablo Isaza
1 answers
Answer question0
Asumiendo la estructura del código de su dibujo. Es posible que deba envolver su fecha dentro de un elemento que no se rompa como lapso para mostrar su fecha.
En el evento de cambio del selector de fechas, puede actualizar esos intervalos. Aquí hay una pequeña demostración de ello.
const datePicker = document.getElementById("date-selector"); const dateSections = document.getElementsByClassName("date"); // adding a listener to the date picker on its onchange event. datePicker.addEventListener("change", (e) => { const d = new Date(e.target.value); const date = d.getDate(); const month = d.getMonth() + 1; const year = d.getFullYear(); // this is an interpolated string, you can format it in any way you like const formattedString = `${date}/${month}/${year}`; // update all "date" sections for (let section of dateSections) { section.innerHTML = formattedString; } }); <input id="date-selector" type="date" /> <ul> <li> Task1 <span class="date">10/01/22</span> </li> <li> Task1 <span class="date">10/01/22</span> </li> <li> Task1 <span class="date">10/01/22</span> </li> </ul>
·
Juan Pablo Isaza
Report
Answer question