---
title: "Datum i dropmenyer skapar nytt datum"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/99766-datum-i-dropmenyer-skapar-nytt-datum"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Palle"
published: "2004-03-18T16:08:39.000Z"
updated: "2004-03-19T10:19:49.000Z"
replies: 3
views: 295
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/99766-datum-i-dropmenyer-skapar-nytt-datum"
---

# Datum i dropmenyer skapar nytt datum

## #1 — Palle, 2004-03-18T16:08Z

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

Bilagor:

- [js_ex.gif](https://www.webforum.nu/a/3087.gif)

Permalänk: https://www.webforum.nu/p/99766

## #2 — J.N., 2004-03-18T16:47Z

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.

Permalänk: https://www.webforum.nu/p/1303153

## #3 — dectgap, 2004-03-18T16:48Z

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

Permalänk: https://www.webforum.nu/p/1303155

## #4 — Palle, 2004-03-19T10:19Z

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

Permalänk: https://www.webforum.nu/p/1303669

---

Tråden på webben: https://www.webforum.nu/amne/javascript/99766-datum-i-dropmenyer-skapar-nytt-datum