jQuery實(shí)現(xiàn)日期聯(lián)動效果實(shí)例
本文實(shí)例講述了jQuery實(shí)現(xiàn)日期聯(lián)動效果的方法。分享給大家供大家參考,具體如下:
實(shí)現(xiàn)目標(biāo):
兩個日期,有下拉框:
<head> //導(dǎo)入jquery地址 <script src="jquery-1.7.2.min.js" 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>
參考了一些代碼,終于能實(shí)現(xiàn)了~~
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- 基于JQuery的日期聯(lián)動實(shí)現(xiàn)代碼
- jquery select操作的日期聯(lián)動實(shí)現(xiàn)代碼
- jquery+json 通用三級聯(lián)動下拉列表
- 簡單實(shí)用jquery版三級聯(lián)動select示例
- jquery 實(shí)現(xiàn)二級/三級/多級聯(lián)動菜單的思路及代碼
- JQuery打造省市下拉框聯(lián)動效果
- jquery ajax實(shí)現(xiàn)下拉框三級無刷新聯(lián)動,且保存保持選中值狀態(tài)
- jQuery 聯(lián)動日歷實(shí)現(xiàn)代碼
- 基于JQUERY的多級聯(lián)動代碼
- Jquery實(shí)現(xiàn)無刷新DropDownList聯(lián)動實(shí)現(xiàn)代碼
- jQuery制作簡潔的多級聯(lián)動Select下拉框
- 用Jquery實(shí)現(xiàn)多級下拉框無刷新的聯(lián)動
- jQuery 下拉列表 二級聯(lián)動插件分享
相關(guān)文章
基于jquery實(shí)現(xiàn)鼠標(biāo)左右拖動滑塊滑動附源碼下載
這篇文章主要介紹了基于jquery實(shí)現(xiàn)鼠標(biāo)左右拖動滑塊滑動附源碼下載 的相關(guān)資料,需要的朋友可以參考下2015-12-12jQuery解析與處理服務(wù)器端返回xml格式數(shù)據(jù)的方法詳解
這篇文章主要介紹了jQuery解析與處理服務(wù)器端返回xml格式數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了jQuery基于ajax的get方法與后臺交互操作xml格式數(shù)據(jù)的相關(guān)技巧與注意事項,需要的朋友可以參考下2016-07-07DIY jquery plugin - tabs標(biāo)簽切換實(shí)現(xiàn)代碼
接觸jquery 2,3個月了,一直都未動手寫過插件。正好最近比較閑,就打算把一直看不順眼的項目中現(xiàn)有的tab改造一番(現(xiàn)有的tab未能做成一個控件,copy,past的代碼太多)。2010-12-12jquery實(shí)現(xiàn)進(jìn)度條狀態(tài)展示
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)進(jìn)度條狀態(tài)展示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-03-03使用jQuery給input標(biāo)簽設(shè)置默認(rèn)值
這篇文章主要介紹使用jQuery給input標(biāo)簽設(shè)置默認(rèn)值的方法,實(shí)例講解,非常實(shí)用,需要的朋友可以參考下。2016-06-06AJAX和jQuery動態(tài)加載數(shù)據(jù)的實(shí)現(xiàn)方法
本文給大家介紹使用ajax和jquery動態(tài)加載數(shù)據(jù)的實(shí)現(xiàn)方法,使用jQuery可以簡化這個過程。下面通過實(shí)例代碼給大家介紹下,需要的的朋友參考下吧2016-12-12jquery+css+html實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲
這篇文章主要為大家詳細(xì)介紹了jquery+css+html實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05