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 相关文章推荐
jquery DOM操作 基于命令改变页面
May 06 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
jquery实现提示语淡入效果
May 05 jQuery
ionic实现底部分享功能
May 11 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
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
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
WAF的正确bypass
2017/01/05 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
Python中join和split用法实例
2015/04/14 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
python实现文法左递归的消除方法
2020/05/22 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
网吧最新创业计划书范文
2014/03/27 职场文书
驾驶员安全责任书
2014/07/22 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
购房个人委托书范本
2014/10/11 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
2014年纠风工作总结
2014/12/08 职场文书
岳麓书院导游词
2015/02/03 职场文书
电影红河谷观后感
2015/06/11 职场文书
500字作文之难忘的同学
2019/12/20 职场文书