基于JQuery的日期聯(lián)動(dòng)實(shí)現(xiàn)代碼
更新時(shí)間:2011年02月24日 23:39:31 作者:
基于JQuery的日期聯(lián)動(dòng)實(shí)現(xiàn)代碼,需要的朋友可以參考下。
實(shí)現(xiàn)目標(biāo):
兩個(gè)日期,有下拉框:
復(fù)制代碼 代碼如下:
<head>
//導(dǎo)入jquery地址
<script src="(Jquery地址)" language="JavaScript" type="text/javascript"></script>
<script type="text/javascript">
//startYear發(fā)生變化
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>
參考了一些代碼,希望對(duì)需要的朋友有所幫助。
您可能感興趣的文章:
- jquery select操作的日期聯(lián)動(dòng)實(shí)現(xiàn)代碼
- jquery+json 通用三級(jí)聯(lián)動(dòng)下拉列表
- 簡(jiǎn)單實(shí)用jquery版三級(jí)聯(lián)動(dòng)select示例
- jquery 實(shí)現(xiàn)二級(jí)/三級(jí)/多級(jí)聯(lián)動(dòng)菜單的思路及代碼
- JQuery打造省市下拉框聯(lián)動(dòng)效果
- jquery ajax實(shí)現(xiàn)下拉框三級(jí)無刷新聯(lián)動(dòng),且保存保持選中值狀態(tài)
- jQuery 聯(lián)動(dòng)日歷實(shí)現(xiàn)代碼
- 基于JQUERY的多級(jí)聯(lián)動(dòng)代碼
- Jquery實(shí)現(xiàn)無刷新DropDownList聯(lián)動(dòng)實(shí)現(xiàn)代碼
- jQuery制作簡(jiǎn)潔的多級(jí)聯(lián)動(dòng)Select下拉框
- 用Jquery實(shí)現(xiàn)多級(jí)下拉框無刷新的聯(lián)動(dòng)
- jQuery 下拉列表 二級(jí)聯(lián)動(dòng)插件分享
- jQuery實(shí)現(xiàn)日期聯(lián)動(dòng)效果實(shí)例
相關(guān)文章
firefox下jQuery UI Autocomplete 1.8.*中文輸入修正方法
在FF下,切換到中文輸入法,再輸入中文,是不能立即自動(dòng)查詢,需要按下其他按鍵,比如CTRL,后來,通過修改源代碼即可修復(fù)這個(gè)問題2012-09-09jQuery過濾HTML標(biāo)簽并高亮顯示關(guān)鍵字的方法
這篇文章主要介紹了jQuery過濾HTML標(biāo)簽并高亮顯示關(guān)鍵字的方法,實(shí)例分析了jquery遍歷html標(biāo)簽并進(jìn)行替換的相關(guān)技巧,需要的朋友可以參考下2015-08-08jquery和css3實(shí)現(xiàn)的炫酷時(shí)尚的菜單導(dǎo)航
點(diǎn)擊列表圖表后,內(nèi)容頁面向內(nèi)移動(dòng)顯示菜單項(xiàng)。當(dāng)單擊關(guān)閉菜單按鈕時(shí),菜單項(xiàng)隱藏,內(nèi)容頁恢復(fù)原位2014-09-09jquerymobile局部渲染的各種刷新方法小結(jié)
本篇文章主要是對(duì)jquerymobile局部渲染的各種刷新方法進(jìn)行了總結(jié)介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-03-03JQuery實(shí)現(xiàn)電梯導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)電梯導(dǎo)航效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07jQuery插件ImgAreaSelect實(shí)現(xiàn)頭像上傳預(yù)覽和裁剪功能實(shí)例講解一
這篇文章主要介紹了jQuery插件ImgAreaSelect實(shí)現(xiàn)頭像上傳預(yù)覽和裁剪功能實(shí)例講解一,需要的朋友可以參考下2017-05-05