在 js 创建的元素中获取 js 中的 css 存储中的日期

Question

我正在学习 Javascript，并尝试构建一个待办事项应用程序。我输入任务和日期。我想要一个包含每个任务及其分配日期的列表。这可以只用 HTML/Javascript 来完成，用 HTML 选择日期吗？

代码如下：

<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);
}

Answer 1

假设您的绘图中的代码结构。您可能需要将日期包装在像 span 这样的不间断元素中以显示您的日期。

在日期选择器的更改事件中，您可以更新这些跨度。这是它的一个小演示。

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>