麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

基于javascript bootstrap實現生日日期聯動選擇

2019-11-20 10:17:15
字體:
來源:轉載
供稿:網友

本文實例為大家分享了js實現日期聯動選擇的相關代碼,適用于生日的選擇,供大家參考,具體內容如下

實現目標:年月日三個select 輸入框,以及一個hidden的input,通過js獲取input的值,如果有值切是日期格式,年月日select為input中的時間。否則為空。年默認區間段為1900年到當今年份

本人使用了bootstrap,class請參照bootstrap的相關說明

下面是html 內容:

<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 的實現:

//設置生日的轉換和獲取   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>");  } } );  //根據后臺提供的數據,填充用戶的值 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"); } }

如果大家還想深入學習,可以點擊這里進行學習,再為大家附兩個精彩的專題:Bootstrap學習教程 Bootstrap實戰教程

以上就是本文的全部內容,希望對大家的學習有所幫助。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 国产成人精品一区二区视频免费 | 欧美日韩成人一区二区 | 亚洲一区久久 | 九一成人 | 久久精品在这里 | 日韩精品久久久久久久九岛 | 在线成人www免费观看视频 | 一本视频在线观看 | 一级做a爰性色毛片免费 | 欧美激情精品久久久久久久久久 | 国产一区精品在线观看 | 日韩中文字幕一区二区三区 | 亚洲综合视频网站 | 国产精品热 | 91精品国产99久久久久久 | 91精品国产刺激国语对白 | 国产理论视频在线观看 | 精品视频在线免费看 | 国产精品久久久在线观看 | 爱射av| 小雪奶水翁胀公吸小说最新章节 | 毛片免费一区二区三区 | av在线看网站| 久久99精品久久久久久青青日本 | 国产一级91 | 密室逃脱第一季免费观看完整在线 | 中文字幕在线播放不卡 | 久久久久国产精品久久久久 | 激情久久免费视频 | 中韩毛片| 精品一区二区久久久久 | 91免费视频版 | 亚洲尻逼视频 | 国产午夜精品久久久 | 曰韩精品 | 久久久久久久久成人 | 369看片你懂的小视频在线观看 | 免费高潮在线国 | 天天干天天透 | 小视频免费在线观看 | 亚洲成人夜色 |