基于javascript bootstrap實現(xiàn)生日日期聯(lián)動選擇
本文實例為大家分享了js實現(xiàn)日期聯(lián)動選擇的相關(guān)代碼,適用于生日的選擇,供大家參考,具體內(nèi)容如下
實現(xiàn)目標:年月日三個select 輸入框,以及一個hidden的input,通過js獲取input的值,如果有值切是日期格式,年月日select為input中的時間。否則為空。年默認區(qū)間段為1900年到當今年份
本人使用了bootstrap,class請參照bootstrap的相關(guān)說明
下面是html 內(nèi)容:
<div class="col-sm-9"> <label class="checkbox-inline"> <select node-type="birthday_year" name="birthday_y" id="birthday_y"> <option value=""></option> </select><span>年</span> </label> <label class="checkbox-inline"> <select node-type="birthday_month" name="birthday_m" id="birthday_m"> <option value=""></option> </select><span>月</span> </label> <label class="checkbox-inline"> <select node-type="birthday_month" name="birthday_d" id="birthday_d"> <option value=""></option> </select><span>日</span> </label> <input type="hidden" name="birth" id="birth" value="2016/2/12"> <label class='checkbox-inline text-warning hidden' id="birth_error_info"><i class='fa fa-warning'>請輸入完整生日</i></label> </div>
下面是js 的實現(xiàn):
//設(shè)置生日的轉(zhuǎn)換和獲取 var date=new Date(); var year=date.getFullYear(); for(var i=year;i>=1900;i--){ $("#birthday_y").append("<option value="+i+" label="+i+">"+i+"</option>"); } $('#birthday_y').change(function(){ var birth_year=$('#birthday_y').val(); if(birth_year!=""){ var birth_month=$('#birthday_m').val(); if(birth_month!=""){ if(birth_month=="2"){ if((birth_year%4==0 && birth_year%100!=0) || (birth_year%400==0)){ $("#birthday_d").append("<option value=" + 29 + " label=" + 29 + ">" + 29 + "</option>"); }else{ $("#birthday_d option[value='29']").remove(); } } }else { for (var i = 1; i <= 12; i++) { $("#birthday_m").append("<option value=" + i + " label=" + i + ">" + i + "</option>"); } } }else{ $("#birthday_m").html("<option value=''></option>"); $("#birthday_d").html("<option value=''></option>"); } checkBirthday(); }); $('#birthday_m').change(function(){ var birth_year=$('#birthday_y').val(); var birth_month=this.value; var birth_day=$('#birthday_d').val(); if(birth_month!=""){ switch (birth_month){ case "1":case "3":case "5":case "7":case "8":case "10":case "12": if(birth_day=="") { $("#birthday_d").empty(); $("#birthday_d").append("<option value='' ></option>"); for (var i = 1; i <= 31; i++) { $("#birthday_d").append("<option value=" + i + " label=" + i + ">" + i + "</option>"); } }else { switch ($("#birthday_d option:last").attr("value")){ case "28":$("#birthday_d").append("<option value=" + 29 + " >" + 29 + "</option>"); case "29":$("#birthday_d").append("<option value=" + 30 + " >" + 30 + "</option>"); $("#birthday_d").append("<option value=" + 31 + " >" + 31 + "</option>");break; case "30":$("#birthday_d").append("<option value=" + 31 + " >" + 31 + "</option>"); break; default :break; } } break; case "4":case "6":case "9": case "11": if(birth_day=="") { $("#birthday_d").empty(); $("#birthday_d").append("<option value='' ></option>"); for (var i = 1; i <= 30; i++) { $("#birthday_d").append("<option value=" + i + " label=" + i + ">" + i + "</option>"); } }else{ switch ($("#birthday_d option:last").attr("value")){ case "28":$("#birthday_d").append("<option value=" + 29 + " >" + 29 + "</option>"); case "29":$("#birthday_d").append("<option value=" + 30 + " >" + 30 + "</option>"); case "31":$("#birthday_d option[value='31']").remove(); break; default :break; } } break; case "2": if(birth_day==""){ if((birth_year%4==0 && birth_year%100!=0) || (birth_year%400==0)){ for(var i=1;i<=29;i++){ $("#birthday_d").append("<option value="+i+" label="+i+">"+i+"</option>"); } }else{ for(var i=1;i<=28;i++){ $("#birthday_d").append("<option value="+i+" label="+i+">"+i+"</option>"); } }}else{ $("#birthday_d option[value='31']").remove(); $("#birthday_d option[value='30']").remove(); if((birth_year%4==0 && birth_year%100!=0) || (birth_year%400==0)){ }else{ $("#birthday_d option[value='29']").remove(); } } break; default :break; } } checkBirthday(); }); $('#birthday_d').change(function() { checkBirthday(); } ); $('#birthday_d').focus( function(){ if($('#birthday_m').val()==""){ $("#birthday_d").empty(); $("#birthday_d").append("<option value='' ></option>"); } } ); //根據(jù)后臺提供的數(shù)據(jù),填充用戶的值 var birth_value=$('#birth').val(); if(birth_value!="") { var date1 = new Date(birth_value); var b_year=date1.getFullYear(); var b_month=date1.getMonth()+1; var b_day=date1.getDate(); $("#birthday_y").find("option[value='"+b_year+"']").attr("selected","selected"); if($('#birthday_y').val()!="") { for (var i = 1; i <= 12; i++) { $("#birthday_m").append("<option value=" + i + " label=" + i + ">" + i + "</option>"); } } $("#birthday_m").find("option[value='"+b_month+"']").attr("selected","selected"); switch (b_month){ case 1:case 3:case 5:case 7:case 8:case 10:case 12: for (var i = 1; i <= 31; i++) { $("#birthday_d").append("<option value=" + i + " label=" + i + ">" + i + "</option>"); } break; case 4:case 6:case 9: case 11: $("#birthday_d").append("<option value='' ></option>"); for (var i = 1; i <= 30; i++) { $("#birthday_d").append("<option value=" + i + " label=" + i + ">" + i + "</option>"); } break; case 2: if((b_year%4==0 && b_year%100!=0) || (b_year%400==0)){ for(var i=1;i<=29;i++){ $("#birthday_d").append("<option value="+i+" label="+i+">"+i+"</option>"); } }else{ for(var i=1;i<=28;i++){ $("#birthday_d").append("<option value="+i+" label="+i+">"+i+"</option>"); } } break; default :break; } $("#birthday_d").find("option[value='"+b_day+"']").attr("selected","selected"); } //驗證生日是否輸入完整 function checkBirthday(){ var b_year= $('#birthday_y').val(); var b_month=$('#birthday_m').val(); var b_day=$('#birthday_d').val(); if(b_year!=""&&b_month!=""&&b_day!=""){ $('#birth').val(b_year+"-"+b_month+"-"+b_day); $('#birth_error_info').addClass("hidden"); }else{ $('#birth').val(""); $('#birth_error_info').removeClass("hidden"); } }
如果大家還想深入學(xué)習(xí),可以點擊這里進行學(xué)習(xí),再為大家附兩個精彩的專題:Bootstrap學(xué)習(xí)教程 Bootstrap實戰(zhàn)教程
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
JavaScript中的for...of和for...in循環(huán)容易遇到的問題及解決方法總結(jié)
在 JavaScript 編程中,for...of 和 for...in 是常用的循環(huán)語法,但它們在使用時可能會引發(fā)一些意想不到的問題,本文將分享我在使用這兩種循環(huán)時所遇到的坑和經(jīng)驗,需要的朋友可以參考下2023-08-08wufengteam?core統(tǒng)一中心注冊器功能解析
這篇文章主要為大家介紹了wufengteam?core統(tǒng)一中心注冊器功能解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11利用jsonp跨域調(diào)用百度js實現(xiàn)搜索框智能提示
這篇文章主要為大家詳細介紹了使用jsonp跨域調(diào)用百度js實現(xiàn)搜索框智能提示,感興趣的小伙伴們可以參考一下2016-08-08javascript實現(xiàn)依次輸入input自動定焦
這篇文章主要介紹了javascript實現(xiàn)依次輸入input自動定焦的方法及示例代碼,非常實用,這里推薦給小伙伴們2014-12-12webpack3升級到webpack4遇到問題總結(jié)
這篇文章主要介紹了webpack3升級到webpack4遇到問題總結(jié),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09