js出生日期 年月日级联菜单

现在世界通用的公历（阳历）也经过一个长期演变的过程。我

们先看，公历每个月的日数是固定的："七前单大，八后双大"。也

就是说，一、三、五、七、八、十、腊月（十二月）是31天，四、

六、九、十一月是30天，只有二月，平年28天，闰年29天。

 

 

代码

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " WebForm1.aspx.cs "  Inherits = " WebApplication1.WebForm1 "   %>

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >

< html xmlns = " http://www.w3.org/1999/xhtml "   >
< head runat = " server " >
     < title >< / title>
< / head>
< body >
     < form id = " form1 "  runat = " server " >
     < div >
    < select name = YYYY id = " YYYY "  onchange = " YYYYMM(this.value) " >
         < option value = "" > 选择 年 < / option>
     < / select>
     < select name = MM id = " MM "  onchange = " MMDD(this.value) " >
         < option value = "" > 选择 月 < / option>
     < / select>
     < select name = DD id = " DD " >
         < option value = "" > 选择 日 < / option>
     < / select>
     < / div>
     < asp:HiddenField ID = " hfValue "  runat = " server "   / >
     < asp:Button ID = " btnSave "  runat = " server "  Text = " 保存 "  onclick = " btnSave_Click "   / >
     < / form>
< / body>
< / html>
< script language = " JavaScript " >  
<!--

     function  getValue() {
         var  year  =  document.getElementById( " YYYY " ).options[document.getElementById( " YYYY " ).selectedIndex].value;
         var  month  =  document.getElementById( " MM " ).options[document.getElementById( " MM " ).selectedIndex].value;
         var  day  =  document.getElementById( " DD " ).options[document.getElementById( " DD " ).selectedIndex].value;
        document.getElementById( " hfValue " ).value  =  year + " - " + month + " - " + day;
    }

window.onload = function () {
    strYYYY  =  document.form1.YYYY.outerHTML;
    
    strMM  =  document.form1.MM.outerHTML;
    strDD  =  document.form1.DD.outerHTML;
    MonHead  =  [ 31 ,  28 ,  31 ,  30 ,  31 ,  30 ,  31 ,  31 ,  30 ,  31 ,  30 ,  31 ];
     // 先给年下拉框赋内容
     var  y  =   new  Date().getFullYear();
     var  str  =  strYYYY.substring( 0 , strYYYY.length  -   9 );
    
     for  ( var  i  =  (y  -   80 ); i  <  (y  +   2 ); i ++ )  // 以今年为准，前30年，后30年
    {
        str  +=   " <option value=' "   +  i  +   " '>  "   +  i  +   "  年 "   +   " </option>\r\n " ;
    }
    document.form1.YYYY.outerHTML  =  str  +   " </select> " ;
     // 赋月份的下拉框
     var  str  =  strMM.substring( 0 , strMM.length  -   9 );
     for  ( var  i  =   1 ; i  <   13 ; i ++ ) {
        str  +=   " <option value=' "   +  i  +   " '>  "   +  i  +   "  月 "   +   " </option>\r\n " ;
    }
    document.form1.MM.outerHTML  =  str  +   " </select> " ;
    document.form1.YYYY.value  =  y;
    document.form1.MM.value  =   new  Date().getMonth()  +   1 ;
     var  n  =  MonHead[ new  Date().getMonth()];
     if  ( new  Date().getMonth()  ==   1   &&  IsPinYear(YYYYvalue)) n ++ ;
    writeDay(n);  // 赋日期下拉框
    document.form1.DD.value  =   new  Date().getDate();
}
function  YYYYMM(str)  // 年发生变化时日期发生变化(主要是判断闰平年)
{
     var  MMvalue  =  document.form1.MM.options[document.form1.MM.selectedIndex].value;
     if  (MMvalue  ==   "" ) {
        DD.outerHTML  =  strDD;
         return ;
    }
     var  n  =  MonHead[MMvalue  -   1 ];
     if  (MMvalue  ==   2   &&  IsPinYear(str)) n ++ ;
    writeDay(n)
}
function  MMDD(str)  // 月发生变化时日期联动
{
     var  YYYYvalue  =  document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value;
     if  (str  ==   "" ) {
        DD.outerHTML  =  strDD;
         return ;
    }
     var  n  =  MonHead[str  -   1 ];
     if  (str  ==   2   &&  IsPinYear(YYYYvalue)) n ++ ;
    writeDay(n)
}
function  writeDay(n)  // 据条件写日期的下拉框
{
     var  s  =  strDD.substring( 0 , strDD.length  -   9 );
     for  ( var  i  =   1 ; i  <  (n  +   1 ); i ++ ) s  +=   " <option value=' "   +  i  +   " '>  "   +  i  +   "  日 "   +

" </option>\r\n " ;
    document.form1.DD.outerHTML  =  s  +   " </select> " ;

}
function  IsPinYear(year)  // 判断是否闰平年
{
     return  ( 0   ==  year  %   4   &&  (year  %   100   !=   0   ||  year  %   400   ==   0 ))
}
// -->
< / script>

 

.aspx.cs

 

代码

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Web;
using  System.Web.UI;
using  System.Web.UI.WebControls;

namespace  WebApplication1
{
     public   partial   class  WebForm1 : System.Web.UI.Page
    {
         protected   void  Page_Load( object  sender, EventArgs e)
        {
            btnSave.Attributes.Add( " onclick " ,  " getValue() " );
        }

         protected   void  btnSave_Click( object  sender, EventArgs e)
        {
            Response.Write(hfValue.Value);
        }
    }
}