gpt4 book ai didi

javascript - 显示选择选项文本日期

转载 作者:行者123 更新时间:2023-12-02 18:20:12 25 4
gpt4 key购买 nike

我有一个选择选项下拉菜单,仅显示星期一(以选择特定的一周)。

<select id="monday" name="monday">
<option value="7">
Mon 1/7/2013 (Week 02)
</option><option value="14">
Mon 1/14/2013 (Week 03)
</option>
// etc...
</select>

我想获取选项文本(即 Mon 1/7/2013(第 02 周))并使用它在表格中显示该周的日期:

<div id='mondaydate'>Mon 1/7/2013 (Week 02)</div> | <div id='tuesdaydate'>Tue 1/8/2013 (Week 02)</div> | <div id='wednesdaydate'>Wed 1/9/2013 (Week 02)</div>...

当选择选项更改时,我希望 <div> 中的日期也要改变。现在我拥有的 JavaScript(不起作用)是:

<script type='text/javascript'>
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon=new Date("text");

document.getElementById("mondaydate").innerHTML = "mon.setDate(mon.getDate()+0)";
document.getElementById("tuesdaydate").innerHTML = "mon.setDate(mon.getDate()+1)";
document.getElementById("wednesdaydate").innerHTML = "mon.setDate(mon.getDate()+2)";
document.getElementById("thursdaydate").innerHTML = "mon.setDate(mon.getDate()+3)";
document.getElementById("fridaydate").innerHTML = "mon.setDate(mon.getDate()+4)";
document.getElementById("saturdaydate").innerHTML = "mon.setDate(mon.getDate()+5)";
document.getElementById("sundaydate").innerHTML = "mon.setDate(mon.getDate()+6)";
</script>

这可以做到吗,还是我在白费力气?

更新 - 解决方案

正如建议的那样,我很高兴得到了一点报价,所以我摆脱了那些。另外,正如建议的那样,日期需要格式化为第一次尝试仅提供时间戳。使用this date format solution我能够将日期格式化为人类可读的格式。

完整的 JavaScript 代码:

<script type='text/javascript'>
function formatDate(date, fmt) {
function pad(value) {
return (value.toString().length < 2) ? '0' + value : value;
}

return fmt.replace(/%([a-zA-Z])/g, function (_, fmtCode) {
switch (fmtCode) {
case 'Y':
return date.getUTCFullYear();
case 'M':
return pad(date.getUTCMonth() + 1);
case 'd':
return pad(date.getUTCDate());
case 'H':
return pad(date.getUTCHours());
case 'm':
return pad(date.getUTCMinutes());
case 's':
return pad(date.getUTCSeconds());
default:
throw new Error('Unsupported format code: ' + fmtCode);
}
});
}
function changeDate()
{
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon = new Date(text);
document.getElementById("mondaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+0)), '%M/%d/%Y');
document.getElementById("tuesdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("wednesdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("thursdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("fridaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("saturdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("sundaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
}
</script>

另外,请注意,最初我错误地设置了日期,如星期一+0、星期二+1、星期三+2等(没有注意到,因为我得到的只是时间戳)。这似乎确实是在设置日期,因此星期一和星期二显示正确,但星期三显示星期四的日期,星期四显示星期日的日期,等等。将每个递增 +1 解决了这个问题。

最佳答案

删除变量周围的引号,否则它只会显示引号中的内容,而不执行任何逻辑:

var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon=new Date(text); <--- No quotes around text variable


document.getElementById("mondaydate").innerHTML = mon.setDate(mon.getDate()+0); <--- No quotes

//Same with everything below, stop with the quotes!
document.getElementById("tuesdaydate").innerHTML = mon.setDate(mon.getDate()+1);
document.getElementById("wednesdaydate").innerHTML = mon.setDate(mon.getDate()+2);
document.getElementById("thursdaydate").innerHTML = mon.setDate(mon.getDate()+3);
document.getElementById("fridaydate").innerHTML = mon.setDate(mon.getDate()+4);
document.getElementById("saturdaydate").innerHTML = mon.setDate(mon.getDate()+5);
document.getElementById("sundaydate").innerHTML = mon.setDate(mon.getDate()+6);

关于javascript - 显示选择选项文本日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18901689/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com