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 (Week 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>

これを行うことができますか、それとも車輪を回転させていますか?

更新 - 解決策

提案されたように、私は少し引用を喜んで得たので、それらを取り除きました. また、提案されているように、最初の試行ではタイムスタンプのみが提供されるため、日付をフォーマットする必要があります。この日付形式ソリューションを使用して、日付を人間が読める形式にフォーマットすることができました。

完全に機能する 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 に答える