js出生日期 年月日级联菜单示例代码


Posted in Javascript onJanuary 10, 2014

现在世界通用的公历(阳历)也经过一个长期演变的过程。我们先看,公历每个月的日数是固定的:"七前单大,八后双大"。也就是说,一、三、五、七、八、十、腊月(十二月)是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);
        }
    }
}
Javascript 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
vue指令做滚动加载和监听等
May 26 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 Javascript
JS实现根据出生年月计算年龄
Jan 10 #Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 #Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 #Javascript
深入理解JSON数据源格式
Jan 10 #Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 #Javascript
Script标签与访问HTML页面详解
Jan 10 #Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 #Javascript
You might like
php中常用编辑器推荐
2007/01/02 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
Python中atexit模块的基本使用示例
2015/07/08 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
Python中logging实例讲解
2019/01/17 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
windows下python安装pip方法详解
2020/02/10 Python
基于python3实现倒叙字符串
2020/02/18 Python
python redis存入字典序列化存储教程
2020/07/16 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
python unichr函数知识点总结
2020/12/16 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
童装店创业计划书
2014/01/09 职场文书
一年级班主任感言
2014/03/08 职场文书
教师党员承诺书
2014/03/25 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
装修安全责任协议书
2016/03/22 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书