输入一周,提交输入并获取该周的所有天数,每个天数都在自己的段落中

input a week, submit input and get all days in that week each in its own paragraph

提问人:user3697060 提问时间:11/16/2023 最后编辑:Rory McCrossanuser3697060 更新时间:11/16/2023 访问量:38

问:

我希望用户输入一个日期,例如“2023 年 11 月 16 日”,并从周一开始获取该特定一周的所有日期,这将返回示例:

13 nov 2023
14 nov 2023
15 nov 2023
16 nov 2023
17 nov 2023
18 nov 2023
19 nov 2023

但是,我无法绕过一种与我的 HTML 页面绑定的方法,以便有一个用户输入日期的字段,并且有一个提交按钮,在选择日期后,将检索日期并显示在页面上,每个日期都在自己的段落标签中。input

这是我拥有的代码,但我无法将其与我的页面绑定:

function days(current) {
  var week = [];
  // Starting Monday not Sunday 
  var first = current.getDate() - current.getDay() + 1;
  current.setDate(first);
  for (var i = 0; i < 7; i++) {
    week.push(new Date(+current));
    current.setDate(current.getDate()+1);
  }
  return week;
}

var input = document.getElementById('date').innerHTML = new Date(2023, 05, 13);
console.log('input: %s', input);
var result = document.getElementById('date1').innerHTML = days(input);
<input id="date" placeholder="type">
<button type="button" onclick="days()">press me</button>
JavaScript 日期

评论

0赞 Nico Haase 11/16/2023
究竟什么不起作用?您尝试过什么来解决问题?你被困在哪里了?这是如此之少的代码,即使使用 ,调试它也应该不那么困难console.log

答:

0赞 Rory McCrossan 11/16/2023 #1

要将事件绑定到 HTML 中的操作,可以使用 .在这种情况下,我建议监听输入事件。然后,您可以获取用户选择的值,并将其传递给您的方法,以生成所需的日期数组。addEventListener()inputdatedays()

从那里,您可以创建一个 HTML 字符串,以在其自己的标签中输出每个日期,您可以在容器元素中显示该标签,如下所示:<p>

const outputContainer = document.querySelector('#output-container');

function getDaysOfWeek(current) {
  var week = [];
  var first = current.getDate() - current.getDay() + 1;
  current.setDate(first);
  for (var i = 0; i < 7; i++) {
    week.push(new Date(+current));
    current.setDate(current.getDate() + 1);
  }
  return week;
}

document.querySelector('#date').addEventListener('input', e => {
  const weekDates = getDaysOfWeek(new Date(e.target.value));
  const html = weekDates.map(d => `<p>${d.toLocaleString()}</p>`).join('');
  outputContainer.innerHTML = html;
});
p { margin: 0; }
<input type="date" id="date" placeholder="type" />

<div id="output-container"></div>

请注意,我曾经使用浏览器中设置的区域性来设置日期格式。这可以很容易地更新,以你需要的任何格式输出日期。toLocaleString()

评论

0赞 user3697060 11/16/2023
嗨,McCrossan,如果我可能希望检索日期并能够将它们发布到数据库,我知道我需要将它们包装在一个输入标签中,这将允许我构建一个表单来将每个日期发布到相关字段。我将如何从您给出的解决方案进行。谢谢。
0赞 Rory McCrossan 11/17/2023
在这种情况下,您只需要将我示例中的元素包装在带有提交按钮的元素中。任何基本的 HTML 表单教程都会告诉你如何做到这一点。从那里,您需要编写后端代码来接收值并将它们插入到数据库中。这又应该是一项微不足道的任务,但取决于您使用的服务器端堆栈。inputform