Javascript两个datepicker冲突 [英] Javascript two datepicker conflict
问题描述
这是我的代码完整代码：
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>
我有两个日期提醒者。当我改变第一个它是完美的工作，但如果我改变第二个功能将工作在第一个datepciker
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
我希望他们有自己的功能为每个datepicker。我该怎么做才能发生这种情况？我已经试图把这样的东西放在这个 getElementById（'day day2'）中，但它不起作用。
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.
推荐答案
您的选择分配了ids 天和年两倍于您的标记。那是错的。 ID应该是唯一的。
Your select have assigned the ids day and year twice in your markup. That is wrong. ID should be unique.
请将这些ID更改为day1，year1，day2和year2。然后将这些id作为参数传递到这样的函数中，如 changeDate（this.value，day1，year1）和此 changeDate（this。值，day2，year2）。
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").
现在将changeDate定义为
Now define changeDate as
function changeDate(i, day, year) {
var e = document.getElementById( day ); // please note that day is the variable passed
...................
}
作为一个无关的旁注， this.options [selectedIndex] .value 是一样的作为 this.value
As an unrelated side note, this.options[selectedIndex].value is same as this.value
这篇关于Javascript两个datepicker冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
