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 相关文章推荐
JavaScript入门教程 Cookies
Jan 31 Javascript
js prototype截取字符串函数
Apr 01 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
JavaScript 学习历程和心得分享
Dec 12 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
浅谈mint-ui 填坑之路
Nov 06 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 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中time()和mktime()方法的区别
2013/09/28 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
python基础教程之元组操作使用详解
2014/03/25 Python
Python中文件操作简明介绍
2015/04/13 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
兼职学生的自我评价
2013/11/24 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
考试诚信承诺书
2014/05/23 职场文书
法院授权委托书范文
2014/08/02 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
2014年班务工作总结
2014/12/02 职场文书
邹越演讲观后感
2015/06/15 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
php+laravel 扫码二维码签到功能
2021/05/15 PHP