Drop Down menu date change

[andyc209]

Is there a script i can use to do the following

I have 4 text fields each with different dates in and a drop down select menu with numbers from 1 to 28.

If the user selects 10 from the drop down (months) it automatically changes the dates in the four text fields (date1,date2 etc) to add 10 months to the date that was already in there.

<select name="months" style="width: 100px;">
<option selected="selected" value="18">-- 18 (default) -</option>
<option value="0">-- select --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
.....etc

<input name="date1" id="date1" type="text" tabindex="12" value="20/01/2009" />
<input name="date2" id="date2" type="text" tabindex="12" value="20/03/2009" />
<input name="date3" id="date3" type="text" tabindex="12" value="20/06/2009" />
<input name="date4" id="date4" type="text" tabindex="12" value="20/09/2009" />

 

[interfacetricks]

For some date strings (e.g. "Aug 1, 2010") you can use Date.parse() to turn them into a numeric value. However for short dates it expects the american format of MM/DD/YYYY.

So if you've got days first, one way to do what you want is to take the date strings, split them up into numbers, then do the addition with those numbers and turn them back into dates.

You can use split() to split up the string, then new Date(years, months, days) to turn it back into a date. I've made an example of doing just this, and put some more explanation in the source code.

http://webinterfacetricks.com/date_test/

I wasn't sure if you wanted to add months to the original value of the input-box, or to whatever the current value is when you select the number, so I've included an example of both.

Hope this helps.

 

[andyc209]

OMG thanks so much for this-exactly what i needed,cheers!