bootstrap 生日选择_基于javascript bootstrap实现生日日期联动选择_javascript技巧

本文实例为大家分享了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(""+i+"");

}

$('#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("" + 29 + "");

}else{

$("#birthday_d option[value='29']").remove();

}

}

}else {

for (var i = 1; i <= 12; i++) {

$("#birthday_m").append("" + 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 <= 31; i++) {

$("#birthday_d").append("" + i + "");

}

}else {

switch ($("#birthday_d option:last").attr("value")){

case "28":$("#birthday_d").append("" + 29 + "");

case "29":$("#birthday_d").append("" + 30 + "");

$("#birthday_d").append("" + 31 + "");break;

case "30":$("#birthday_d").append("" + 31 + "");

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 <= 30; i++) {

$("#birthday_d").append("" + i + "");

}

}else{

switch ($("#birthday_d option:last").attr("value")){

case "28":$("#birthday_d").append("" + 29 + "");

case "29":$("#birthday_d").append("" + 30 + "");

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(""+i+"");

}

}else{

for(var i=1;i<=28;i++){

$("#birthday_d").append(""+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 <= 12; i++) {

$("#birthday_m").append("" + 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 <= 31; i++) {

$("#birthday_d").append("" + i + "");

}

break;

case 4:case 6:case 9: case 11:

$("#birthday_d").append("");

for (var i = 1; i <= 30; i++) {

$("#birthday_d").append("" + i + "");

}

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(""+i+"");

}

}else{

for(var i=1;i<=28;i++){

$("#birthday_d").append(""+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");

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助。