基于JQuery的日期联动实现代码
基于JQuery的日期联动实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:实现目标:两个日期,有下拉框:复制代码代码如下://导入jquery地址//startYear发生变化functionchangeYear(...

实现目标:

基于JQuery的日期联动实现代码1

两个日期,有下拉框:

复制代码 代码如下:

<head>

//导入jquery地址

<script src="(Jquery地址)" language="JavaScript" type="text/javascript"></script>

<script type="text/javascript">

//startYear发生变化

function changeYear(str,isstart)

{

var pre = "start";

if(isstart == false)

{

pre = "end";

}

var startMonth = $(pre + "Month").value;

if(startMonth == "")

{

var e = $(pre + "Month");

optionClear(e);

return;

}

var n = MonHead[startMonth - 1];

if(startMonth == 2 && IsPinYear($(pre + "Year").value))

{

n++;

}

writeDay(n,pre);

}

function changeMonth(str,isstart)

{

var pre = "start";

if(isstart == false)

{

pre = "end";

}

var year = $(pre + "Year").value;

if(year == "")

{

var e = $(pre + "Day");

optionClear(e);

return;

}

var n = MonHead[str - 1];

if(str == 2 && IsPinYear($(pre + "Year")))

{

n++;

}

writeDay(n,pre);

}

function dateStart()

{

var defaultStartY = "2011";

var defaultStartM = "1";

var defaultStartD = "14";

var defaultEndY = "2011";

var defaultEndM = "2";

var defaultEndD = "23";

MonHead = [31,28,31,30,31,30,31,31,30,31,30,31];

var prestr = new Array("start","end");

for(var j=0; j<2; j++)

{

var pre = prestr[j];

//start 年

var y = new Date().getFullYear();

if(pre == "start")

{

//start初始选中前第10天

var i_index = 0;

for(var i=(y-10); i<=y; i++)

{

$(pre+"Year").options.add(new Option(""+i+"",i));

if(i == defaultStartY)

{

$(pre+"Year").options[i_index].selected = true;

}

i_index++;

}

}

else

{

var i_index =0;

for(var i=(y-5); i<=y+5; i++)

{

$(pre+"Year").options.add(new Option(""+i+"",i));

if(i == defaultEndY)

{

$(pre+"Year").options[i_index].selected = true;

}

i_index++;

}

}

//start月

defaultM = (pre == "start" ? defaultStartM : defaultEndM)

for(var i = 1; i < 13; i++)

{

$(pre + "Month").options.add(new Option(""+i+"",i));

if(i == defaultM)

{

$(pre + "Month").options[i-1].selected = true;

}

}

//start日

var n = MonHead[$(pre + "Month").value];

if(new Date().getMonth == 1 && IsPinYear($(pre + "Year").value))

{

n++;

}

defaultD = (pre == "start" ? defaultStartD : defaultEndD)

writeDay(n,pre);

$(pre + "Day").options[defaultD-1].selected = true;

}

}

function writeDay(n,pre)

{

var e = $(pre + "Day");

optionClear(e);

for (var i=1; i<(n+1); i++)

{

e.options.add(new Option(""+i+"",i));

}

}

function IsPinYear(year)

{

return (0 == year%4 && (year%100 != 0 || year % 4 == 0));

}

function optionClear(e)

{

for(var i=e.options.length; i>=0; i--)

{

e.remove(i);

}

}

</script>

</head>

<body onload="dateStart()">

<p name="selectdate">

<select id="startYear" name="startYear" onchange="changeYear(this.value,true)">

</select>

<select id="startMonth" name="startMonth" onchange="changeMonth(this.value,true)">

</select>

<select id="startDay" name="startDay">

</select>

<select id="endYear" name="endYear" onchange="changeYear(this.value,false)">

</select>

<select id="endMonth" name="endMonth" onchange="changeMonth(this.value,false)">

</select>

<select id="endDay" name="endDay">

</select>

</p>

</body>

参考了一些代码,希望对需要的朋友有所帮助。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类