提问人:user3697060 提问时间:11/16/2023 最后编辑:Rory McCrossanuser3697060 更新时间:11/16/2023 访问量:38
输入一周,提交输入并获取该周的所有天数,每个天数都在自己的段落中
input a week, submit input and get all days in that week each in its own paragraph
问:
我希望用户输入一个日期,例如“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>
答:
0赞
Rory McCrossan
11/16/2023
#1
要将事件绑定到 HTML 中的操作,可以使用 .在这种情况下,我建议监听输入事件。然后,您可以获取用户选择的值,并将其传递给您的方法,以生成所需的日期数组。addEventListener()
input
date
days()
从那里,您可以创建一个 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 表单教程都会告诉你如何做到这一点。从那里,您需要编写后端代码来接收值并将它们插入到数据库中。这又应该是一项微不足道的任务,但取决于您使用的服务器端堆栈。input
form
评论
console.log