Datum i dropmenyer skapar nytt datum

Jag har 3 st dropmenyer:

1. start_year (för år)
2. start_month (för månader)
3. start_day (för dagar)

• När man första gången entrar sidan skall enbart start_year ha värden, start_month och start_day ska vara tomma.
• När man väljer ett år skall start_month fyllas med månaderna, numrerat 1 - 12.
• När man sedan väljer start_month skall antal dagar från den valda månaden fyllas på, numrerat 1-X, i start_day.
• När man sedan valt dag i start_day skall det kompletta datumet (ex. 2004-02-14), ökas på med 30 dagar (ex. 2004-03-16), och sedan flyttas över till fältet end_date.

Jag hoppas nu att ni förstår vad jag vill åstadkomma,
se bifogad bild för ytterliggare förtydligande. ;)

Min fråga nu är: - Hur sjutton gör jag?
Känns som om jag testat det mesta, både på egen hand och med hjälp av exempel här på wF, men jag får det inte att fungera perfekt på alla plan tyvärr.

Kravet är att funktionen ska fungera i IE, NN och Moz.

[red]<form id="foo">

	<select name="start_year" style="width: 50px;">
	  <option value="#">Välj:</option>
	  <option value="2004">2004</option>
	  <option value="2005">2005</option>
	</select>
	
	<select name="start_month" style="width: 38px;"></select>
	
	<select name="start_day" style="width: 38px;"></select>
	
	<input type="text" name="end_date"> 

</form>[/red]

HEJ!

För att välja datum använder jag enbart vb, inte js alls.
Det finns antagligen någon anledning till att du vill ha det som du vill?

Jag har tre dd, åå-mm-dd som sedan postas till nästa sida.

Där fixas det lilla problem som kan uppstå med 30/2 mfl.

I din js-validering:
pa = new Date(form.pa_ar.value, form.pa_man.value-1, form.pa_dag.value);
form.hid_pa.value = form.pa_ar.value + "-" + form.pa_man.value + "-" + form.pa_dag.value;
av = new Date(form.av_ar.value, form.av_man.value-1, form.av_dag.value);
form.hid_av.value = form.av_ar.value + "-" + form.av_man.value + "-" + form.av_dag.value;
if (av <= pa){
	alert("Kontrollera datumen.");
	form.av_dag.focus();
	return (false);
}

På nästa sida finns en includefil som behandlar hid_av/hid_pa:

'plockar ut datum så VB förstår från JS. DateSerial klarar ej hid_pa/av direkt.
Dim hid_pa, datumpa, array1, array2, hid_av, datumav

hid_pa = Request.Form("hid_pa")
array1 = split(hid_pa,"-")

hid_av = Request.Form("hid_av")
array2 = split(hid_av,"-")

'DS fixar 31/4 till 1/5
datumpa = DateValue(DateSerial(array1(0),array1(1),array1(2)))
datumav = DateValue(DateSerial(array2(0),array2(1),array2(2)))

Kan du inte använda dig av samma teknik?

Du kan modifiera det till att lägga till datumen i textrutan.
Fast jag förstår inte varför du vill ha det överhuvudtaget, då kan man ändå fylla i vad man vill?

Om du inte vill göra som mig, tipsar jag om att lägga månader och dagar i arrayer. De exempel jag sett gör man så i.

En lösning som blev rörigare än vad det var tänkt:

<script type="text/javascript">
function populateMonths(theForm){
    var monthsOpts = theForm.months.options;
    monthsOpts[monthsOpts.length] = new Option("--");
    var i=0;
    while(i<12)
        monthsOpts[monthsOpts.length] = new Option(++i);
}

var daysInMonths = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
function populateDays(theForm, month){
    var daysOpts = theForm.days.options;
    daysOpts[daysOpts.length] = new Option("--");
    var days = daysInMonths[month-1];
    var i=0;
    while(days-->0)
        daysOpts[daysOpts.length] = new Option(++i);
}

function setEndDate(theForm){
    var startYear  = theForm.year.options[theForm.year.selectedIndex].value;
    var startMonth = theForm.months.selectedIndex - 1;
    var startDay   = theForm.days.selectedIndex;

    var startDate = new Date(startYear, startMonth, startDay);
    var endDate   = new Date(startDate.getTime()+1000*60*60*24*30);

    var endYear  = endDate.getFullYear();
    var endMonth = endDate.getMonth()+1;
    var endDay   = endDate.getDate();

    theForm.end.value = endYear + "-" + (endMonth<10 ? "0"+endMonth : endMonth) + "-" + (endDay<10 ? "0"+endDay : endDay);
}
</script>

...

<form>
    <p>
    <select name="year" onchange="populateMonths(this.form)">
        <option>År</option>
        <option>2004</option>
        <option>2005</option>
    </select>
    <select name="months" onchange="populateDays(this.form, this.selectedIndex)">
    </select>
    <select name="days" onchange="setEndDate(this.form)">
    </select>
    </p>
    
    <p>
    <input type="text" name="end" />
    </p>
</form>

dectgap -
Jag fick inte ditt exempel att fungera helt som jag önskade..
Det blev dubletter av månader då man i efterhand ändrade till ett nytt år, samt
att det också bled dubletter av dagar om man i efterhand ändrade månaderna.

Men efter lite pulande med ditt exempel så hostade det igång på ett sätt som behagar. ;)

Tack! :bire

[red]function pads(num) { return (num<10) ? '0' + num : num; }

var objDate = new Date();
var thisYear = objDate.getYear();thisYear += (thisYear<2000)?1900:0;
var nextYear = eval(thisYear)+1;
var daysInMonths = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

//-----------------------------------------------------------------------------------------------------------------------------------
// ÅR

document.write('<select name=\"year\" style=\"width: 50px;\" onchange=\"setMonths(this.form);\">');
document.write('<option value=\"#\">Välj:</option>');
document.write('<option value=\"'+ thisYear +'\">'+ thisYear +'</option>');
document.write('<option value=\"'+ nextYear +'\">'+ nextYear +'</option>');
document.write('</select> ');

//-----------------------------------------------------------------------------------------------------------------------------------
// MÅNAD

document.write('<select name=\"month\" style=\"width: 38px;\" onchange=\"setDays(this.form, this.selectedIndex);\">');
document.write('</select> ');

//-----------------------------------------------------------------------------------------------------------------------------------
// DAG

document.write('<select name=\"day\" style=\"width: 38px;\" onchange=\"setEndDate(this.form);\">');
document.write('</select>');

//-----------------------------------------------------------------------------------------------------------------------------------

function setMonths(frm){
 
 	var monthsOpts = frm.month.options;
	monthsOpts.length = 0;

	var i=0;
	while(i<monthsOpts.length)
		monthsOpts[++i] = null;

	monthsOpts[monthsOpts.length] = new Option("--","#");

	var i=0;
	while(i<12)
		monthsOpts[monthsOpts.length] = new Option(pads(i+1),++i);

}

function setDays(frm, month){

	var daysOpts = frm.day.options;
	daysOpts.length = 0;

	var i=0;
	while(i<daysOpts.length)
		daysOpts[++i] = null;

	daysOpts[daysOpts.length] = new Option("--","#");

	var i=0;
	while(daysInMonths[month-1]-->0)
		daysOpts[daysOpts.length] = new Option(pads(i+1),++i);

}

function setEndDate(frm){

	var startYear = frm.year.options[frm.year.selectedIndex].value;
	var startMonth = frm.month.selectedIndex-1;
	var startDay = frm.day.selectedIndex;
	var startDate = new Date(startYear, startMonth, startDay);
	var endDate = new Date(startDate.getTime()+1000*60*60*24*30);
	var endYear = endDate.getFullYear();
	var endMonth = endDate.getMonth()+1;
	var endDay = endDate.getDate();

	frm.date_end.value = endYear +"-"+ pads(endMonth) +"-"+ pads(endDay);

}[/red]