Home/ Questions/Q 8511811
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T04:06:37+00:00

Here is my code complete code: <!doctype html> <html> <head> <meta charset=utf-8> <title>Date Picker</title>

  • 0

Here is my code complete code:

<!doctype html>

<html>
<head>
    <meta charset="utf-8">
    <title>Date Picker</title>
</head>
<body>
<strong>Departing:</strong><br/>
<select name='dateSingleMonthDeparting' onChange='changeDate(this.options[selectedIndex].value);'>
    <option value='na'>Month</option>
    <option value='1'>January</option>
    <option value='2'>February</option>
    <option value='3'>March</option>
    <option value='4'>April</option>
    <option value='5'>May</option>
    <option value='6'>June</option>
    <option value='7'>July</option>
    <option value='8'>August</option>
    <option value='9'>September</option>
    <option value='10'>October</option>
    <option value='11'>November</option>
    <option value='12'>December</option>
</select>
<select name='dateSingleDayDeparting' id='day'>
    <option value='na'>Day</option>
</select>
<select name='dateSingleYearDeparting' id='year'>
    <option value='na'>Year</option>
</select><br/>



<strong>Returning:</strong><br/>
<select name='dateSingleMonthReturning' onChange='changeDate(this.options[selectedIndex].value);'>
    <option value='na'>Month</option>
    <option value='1'>January</option>
    <option value='2'>February</option>
    <option value='3'>March</option>
    <option value='4'>April</option>
    <option value='5'>May</option>
    <option value='6'>June</option>
    <option value='7'>July</option>
    <option value='8'>August</option>
    <option value='9'>September</option>
    <option value='10'>October</option>
    <option value='11'>November</option>
    <option value='12'>December</option>
</select>
<select name='dateSingleDayReturning' id='day'>
    <option value='na'>Day</option>
</select>
<select name='dateSingleYearReturning' id='year'>
    <option value='na'>Year</option>
</select>



<script>
function changeDate(i){
    var e = document.getElementById('day');
    while(e.length>0){
        e.remove(e.length-1);
        var j=-1;
        if(i=="na"){
            k=0;
        }else if(i==2){
            k=28;
        }else if(i==4||i==6||i==9||i==11){
            k=30;
        }else{
            k=31;
        }
    }
    while(j++<k){
        var s=document.createElement('option');
        var e=document.getElementById('day');
        if(j==0){
            s.text="Day";
            s.value="na";
            try{
                e.add(s,null);
            }catch(ex){
                e.add(s);
            }
        }
        else{
            s.text=j;
            s.value=j;
            try{
                e.add(s,null);
            }catch(ex){
                e.add(s);
            }
        }
    }
}
var currentTime = new Date();
y = currentTime.getFullYear()+1;
while (y-->1909){
    var s = document.createElement('option');
    var e = document.getElementById('year');
    s.text=y;
    s.value=y;
    try{
        e.add(s,null);
    }catch(ex){
        e.add(s);
    }
}
</script>
</body>
</html>

I have two datepickers. When I change the first one it works perfectly, but if I change the second one the functions will work in the first datepciker

I want them to have their own function for each datepicker. What will I do to make this happen? I already tried to make put something like this getElementById('day day2') but it doesn’t work.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your select have assigned the ids day and year twice in your markup. That is wrong. ID should be unique.

    Please change those IDs to day1, year1, day2 and year2. Then pass those ids as parameters into the function like this changeDate(this.value, "day1", "year1") and this changeDate(this.value, "day2", "year2").

    Now define changeDate as 

    function changeDate(i, day, year) {
    var e = document.getElementById( day ); // please note that day is the variable passed

    ...................
}

    As an unrelated side note, this.options[selectedIndex].value is same as this.value

    • 0