Display select option text date

Question

I have a select option drop down that shows only Mondays (to select a particular week).

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

I would like to grab the option text (i.e. Mon 1/7/2013 (Week 02)) and use it to display that week's dates in a table:

<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. Right now the JavaScript I have (which isn't working) is:

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

Can this be done, or am I spinning my wheels?

UPDATE - SOLUTION

As was suggested, I got a little quote happy, so I got rid of those. Also as suggested, the dates would need to be formatted as the first attempt only provided timestamps. Using this date format solution I was able to format the dates into something readable by humans.

Full working JavaScript code:

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

Also, note that originally I was setting the dates incorrectly with Monday +0, Tuesday +1, Wednesday +2, etc. (didn't notice it as all I got were timestamps). This really seemed to be setting the date, so Monday and Tuesday displayed correctly, but then Wednesday was displaying Thursday's date, Thursday displayed Sunday's date, etc. incrementing each by +1 instead solved that problem.

score 2 · Accepted Answer · answered Sep 19 '13 at 17:54

Remove the quotes around your variables or else it'll just display what's in the quotes and not perform any logic:

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);

So I got a little overboard with the quotes :-) Now I have an onchange event on the select menu, that inserts a value under each date, but it appears to be a timestamp not a formatted date. Any idea how to change that? — ScottD, Sep 19 '13 at 18:02
Hmm you'll probably have to manually format the date...not my specialty unfortunately, but I'm sure the answers been posted somewhere on SO before -- @scd1982 — tymeJV, Sep 19 '13 at 18:19

score 0 · Answer 2 · answered Sep 19 '13 at 18:02

You have a lot of unnecessary quotes, which is screwing up your code.

Have a look at this :

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);
});

Find the working fiddle here : http://jsfiddle.net/bnWRU/1/

score 0 · Answer 3 · edited May 23 '17 at 11:56

0

tymeJV already answered, but I think you might have some trouble with date format in javascript.

I sugest this post: Javascript get date in format

edited May 23 '17 at 11:56

Community

1
1

answered Sep 19 '13 at 18:04

Kenely de Oliveira

3
1
1
3

Display select option text date

3 Answers3