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>

后端C#代码处理

后端C#代码文件

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);
 }
 }
}