Javascript两个日期选择器冲突

Javascript two datepicker conflict

本文关键字：日期 选择器 冲突 两个 Javascript      更新时间：2023-09-26

这是我的代码完整代码：

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

我有两个约会对象。当我更改第一个时，它工作得很好，但如果我更改第二个，函数将在第一个datepciker 中工作

我希望他们对每个日期选择器都有自己的功能。我该怎么做才能做到这一点？我已经尝试过制作类似于getElementById('day day2')的put，但它不起作用。

您的select已在标记中两次分配ID day和year。这是错误的。ID应该是唯一的。

请将这些ID更改为第1天、第1年、第2天和第2年。然后将这些id作为参数传递到像这个changeDate(this.value, "day1", "year1")和这个changeDate(this.value, "day2", "year2")这样的函数中。

现在将changeDate定义为

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

作为一个无关的旁注，this.options[selectedIndex].value与this.value 相同

相关文章：