Jquery获取日期下拉框内容后计算出相应年龄显示在input输入框

 

这个就类似于QQ等软件填写个人信息处的生日后年龄就会自动被计算出。

思路：

        监听下拉框内容的改变

        1、设置年龄的输入框不可编辑，我为了让其以后能往后台传输数据，其属性设置为：readonly unselectable="on"，该设置表示input 元素，不可编辑，不可复制，不可选择，不能接收焦点，设置后文字的颜色也会变成灰色，但是后台可以接收到传值。

        2、获取当前日期的年月日

      3、获取日期下拉框内容，将其转化为数值型

    4、通过计算得出相应年龄并显示在文本框中。

相关界面演示：

初始界面：日期显示的是当前日期

选择相应日期，年龄就会自动显示在文本框内：

选择大于当前日期的时间，浏览器会提示错误，点击确定后年龄输入框内容为空：

 

以下为核心代码：

<script type="text/javascript">
$(function () {
  $(".select").change(function(){
	  var date=new Date();
	  var nowYear = date.getFullYear();
	  var nowMonth = date.getMonth()+1;
	  var nowDay = date.getDate();
	  nowYear = parseInt(nowYear);
	  nowMonth = parseInt(nowMonth);
	  nowDay = parseInt(nowDay);
	  
	  var birthYear = $("#YYYY" ).find("option:selected").text();
	  var birthMonth = $("#MM").find("option:selected").text();
	  var birthDay = $("#DD").find("option:selected").text();
	  birthYear = parseInt(birthYear);
	  birthMonth = parseInt(birthMonth);
	  birthDay = parseInt(birthDay);
	  
	  if(nowYear==birthYear){
		  if((nowMonth>birthMonth)||(nowMonth==birthMonth)&&(nowDay>=birthDay)){
			  $("#age").val("0");
			  }else{
				  alert("生日选择有误，请重新选择");
				  $("#age").val("");
			  }
		  
	  }else{
		  var ageYearSub = nowYear - birthYear;
		  if(ageYearSub>0){
			  if(nowMonth==birthMonth){
				  var ageDaySub = nowDay-birthDay;
				  if(ageDaySub<0){
					  var age = ageYearSub-1;
					  $("#age").val(age);
				  }else{
					  $("#age").val(ageYearSub);
				  }
			  }else{
				  var ageMonthSub = nowMonth-birthMonth;
				  if(ageMonthSub<0){
					  var age2 = ageYearSub-1;
					  $("#age").val(age2);
				  }else{
					  $("#age").val(ageYearSub);
				  }
			  }
		  }
	  }
    });
  });