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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
vue如何使用外部特殊字体的操作
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 SQL防注入代码集合
2008/04/25 PHP
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
详解Node 定时器
2018/02/26 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
Python中实现参数类型检查的简单方法
2015/04/21 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
python 制作简单的音乐播放器
2020/11/25 Python
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
演讲主持词
2014/03/18 职场文书
校庆口号
2014/06/20 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
《观潮》教学反思
2016/02/17 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
深入解析MySQL索引数据结构
2021/10/16 MySQL
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python