基于javascript bootstrap实现生日日期联动选择_javascript技巧
程序员文章站
2022-05-03 13:50:26
...
本文实例为大家分享了js实现日期联动选择的相关代码,适用于生日的选择,供大家参考,具体内容如下
实现目标:年月日三个select 输入框,以及一个hidden的input,通过js获取input的值,如果有值切是日期格式,年月日select为input中的时间。否则为空。年默认区间段为1900年到当今年份
本人使用了bootstrap,class请参照bootstrap的相关说明
下面是html 内容:
下面是js 的实现:
//设置生日的转换和获取 var date=new Date(); var year=date.getFullYear(); for(var i=year;i>=1900;i--){ $("#birthday_y").append(""); } $('#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(""); }else{ $("#birthday_d option[value='29']").remove(); } } }else { for (var i = 1; i " + i + ""); } } }else{ $("#birthday_m").html(""); $("#birthday_d").html(""); } 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(""); for (var i = 1; i " + i + ""); } }else { switch ($("#birthday_d option:last").attr("value")){ case "28":$("#birthday_d").append(""); case "29":$("#birthday_d").append(""); $("#birthday_d").append("");break; case "30":$("#birthday_d").append(""); break; default :break; } } break; case "4":case "6":case "9": case "11": if(birth_day=="") { $("#birthday_d").empty(); $("#birthday_d").append(""); for (var i = 1; i " + i + ""); } }else{ switch ($("#birthday_d option:last").attr("value")){ case "28":$("#birthday_d").append(""); case "29":$("#birthday_d").append(""); 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"+i+""); } }else{ for(var i=1;i"+i+""); } }}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(""); } } ); //根据后台提供的数据,填充用户的值 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 " + i + ""); } } $("#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 " + i + ""); } break; case 4:case 6:case 9: case 11: $("#birthday_d").append(""); for (var i = 1; i " + i + ""); } break; case 2: if((b_year%4==0 && b_year%100!=0) || (b_year%400==0)){ for(var i=1;i"+i+""); } }else{ for(var i=1;i"+i+""); } } 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"); } }
以上就是本文的全部内容,希望对大家的学习有所帮助。
推荐阅读
-
javascript基于DOM实现权限选择实例分析_javascript技巧
-
javascript基于DOM实现权限选择实例分析_javascript技巧
-
JSON+HTML实现国家省市联动选择效果_javascript技巧
-
js实现一个省市区三级联动选择框代码分享_javascript技巧
-
js实现根据身份证号自动生成出生日期_javascript技巧
-
JS简单实现城市二级联动选择插件的方法_javascript技巧
-
基于javascript bootstrap实现生日日期联动选择_javascript技巧
-
基于Bootstrap实现Material Design风格表单插件 附源码下载_javascript技巧
-
JS实现的5级联动Select下拉选择框实例_javascript技巧
-
javascript实现日期三级联动下拉框选择菜单实例代码