天天看點

JQuery實作日期關聯

實作目标:

JQuery實作日期關聯

兩個日期,有下拉框:

JQuery實作日期關聯

<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 year = $(pre + "year").value;

if(year == "")

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

var n = monhead[str - 1];

if(str == 2 && ispinyear($(pre + "year")))

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++)

if(i == defaultendy)

//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))

defaultd = (pre == "start" ? defaultstartd : defaultendd)

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

function writeday(n,pre)

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 id="startday" name="startday">

<select id="endyear" name="endyear" onchange="changeyear(this.value,false)">

<select id="endmonth" name="endmonth" onchange="changemonth(this.value,false)">

<select id="endday" name="endday">

</p>

</body>

JQuery實作日期關聯

參考了一些代碼,終于能實作了~~

繼續閱讀