0

我有一个选择选项下拉菜单，仅显示星期一（选择特定的一周）。

<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（第 2 周））并使用它在表格中显示该周的日期：

<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>...

When the select option changes I would like the dates in the <div>'s to change as well. 现在我拥有的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>

可以做到这一点，还是我在旋转我的轮子？

更新 - 解决方案

正如建议的那样，我得到了一些快乐的引用，所以我摆脱了那些。同样如建议的那样，日期需要格式化，因为第一次尝试只提供时间戳。使用这个日期格式解决方案，我能够将日期格式化为人类可读的格式。

完整的工作 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 反而解决了这个问题。

4

3 回答 3

2

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

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);
于 2013-09-19T17:54:54.113 回答
0

你有很多不必要的引号，这搞砸了你的代码。

看看这个：

JS：

$("#monday").click(function(){
    var sel = document.getElementById("monday");
    var text = sel.options[sel.selectedIndex].text;
    var mon=new Date(text);
    console.log(mon);
    document.getElementById("mondaydate").innerHTML = mon.setDate(mon.getDate()+0);
});

在这里找到工作小提琴：http: //jsfiddle.net/bnWRU/1/

于 2013-09-19T18:02:19.597 回答
0

tymeJV 已经回答了，但我认为您可能对 javascript 中的日期格式有一些问题。

我推荐这篇文章：Javascript get date in format

于 2013-09-19T18:04:00.600 回答