<!doctype html>

<html>

<head>

<title>年月日</title>

</head>

<body onLoad="init()">

<select id="year" onChange="swap_day()"></select>年

<select id="month" onChange="swap_day()"></select>月

<select id="day"></select>日

</body>

<script>

var month_big = new Array("1","3","5","7","8","10","12"); //包含所有大月的数组

var month_small = new Array("4","6","9","11"); //包含所有小月的数组 

//页面加载时调用的初始化select控件的option的函数

function init()

{

    var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框

    var select_month = document.getElementById("month"); //获取id为"month"的下拉列表框

    var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框

    //将年份选项初始化，从1980到2000

    for(var i = 1980; i <= 2000; i++)

    {

        select_year_option = new Option(i, i);

        select_year.options.add(select_year_option);

    }

    //将月份选项初始化，从1到12

    for(var i = 1; i <= 12; i++)

    {

        select_month_option = new Option(i, i);

        select_month.options.add(select_month_option);

    }

    //调用swap_day函数初始化日期

    swap_day();

}

//判断数组array中是否包含元素obj的函数，包含则返回true，不包含则返回false

function array_contain(array, obj)

{

    for (var i = 0; i < array.length; i++)

    {

        if (array[i] === obj)

        {

            return true;

        }

    }

    return false;

}

//根据年份和月份调整日期的函数

function swap_day()

{

    var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框

    var select_month = document.getElementById("month"); //获取id为"month"的下拉列表框

    var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框

    select_day.options.length = 0; //在调整前先清空日期选项里面的原有选项

    var month = select_month.options[select_month.selectedIndex].value; //获取被选中的月份month

    //如果month被包含在month_big数组中，即被选中月份是大月，则将日期选项初始化为31天

    if(array_contain(month_big, month))

    {

        for(var i = 1; i <= 31; i++)

        {

            select_day_option = new Option(i, i);

            select_day.options.add(select_day_option);

        }

    }

    //如果month被包含在month_small数组中，即被选中月份是小月，则将日期选项初始化为30天

    else if(array_contain(month_small, month))

    {

        for(var i = 1; i <= 30; i++)

        {

            select_day_option = new Option(i, i);

            select_day.options.add(select_day_option);

        }

    }

    //如果month为2，即被选中的月份是2月，则调用initFeb()函数来初始化日期选项

    else

    {

        initFeb();

    }

}

//判断年份year是否为闰年，是闰年则返回true，否则返回false

function isLeapYear(year)

{

    var a = year % 4;

    var b = year % 100;

    var c = year % 400;

    if( ( (a == 0) && (b != 0) ) || (c == 0) )

    {

        return true;

    }

    return false;

}

//根据年份是否闰年来初始化二月的日期选项

function initFeb()

{

    var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框

    var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框

    var year = parseInt(select_year.options[select_year.selectedIndex].value); //获取被选中的年份并转换成Int

    //如果是闰年，则将日期选项初始化为29天

    if(isLeapYear(year))

    {

        for(var i = 1; i <= 29; i++)

        {

            select_day_option = new Option(i, i);

            select_day.options.add(select_day_option);

        }

    }

    //如果不是闰年，则将日期选项初始化为28天

    else

    {

        for(var i = 1; i <= 28; i++)

        {

            select_day_option = new Option(i, i);

            select_day.options.add(select_day_option);

        }

    }

}

</script>

</html>

JavaScript日期控件，用select实现的更多相关文章

  1. 【javascript】分享一款经典的日期控件 My97DatePicker

    最近在做平台项目,其中有用到日期选择,相对于 jqueryui 的 datepicker 我更喜欢 My97DatePicker. 理由 体积小,相对于 jqueryui 的 datepicker 的 ...

  2. [转]通过AngularJS directive对bootstrap日期控件的的简单包装

    本文转自:http://www.cnblogs.com/Benoly/p/4109460.html 最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的 ...

  3. [整理]通过AngularJS directive对bootstrap日期控件的的简单包装

    最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形 ...

  4. jquery datepicker-强大的日期控件

    在web开发中,总会遇到需要用户输入日期的情况.一般都是提供一个text类型的input供用户输入日期.然而,这种方式,开发人员必须对用户输入的日期进行验证,判断其合法性.除此之外,让用户输入日期也是 ...

  5. js 日期控件 可以显示为和历

    日期控件的js <!-- /** * Calendar * @param beginYear 1990 * @param endYear 2010 * @param language 0(zh_ ...

  6. Webdriver控制翻页控件,并实现向前向后翻页功能，附上代码，仅供参考，其他类似日期控件的功能可以自己封装

    新增输入与选择页面的html源码: <div style="margin-top:-60px;" class="modal-content" id=&qu ...

  7. 【SoDiaoEditor电子病历编辑器】阶段性更新--新增复选框、日期控件、表格排版支持等

    转眼距离上一次v2正式发布已经过去一个半月了.github期间不定期push了二十几次,同时感谢分布在广州.福建.上海.北京的一众小伙伴,正是你们给出的建议,才让SoDiaoEditor不断完善. 我 ...

  8. JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串，和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动

    JavaScript日历控件开发   概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...

  9. 根据条件决定My97DatePicker日期控件弹出的日期格式

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

随机推荐

  1. 设计模式之 面向对象的养猪厂的故事,C#演示（二）

    (三) 优先使用聚合,而不是继承 有一段时间,养猪场的老板雇用了清洁工人来打扫猪舍.但有一天,老板忽然对自己说"不对啊,既然我有机器人,为什么还要雇人来做这件事情?应该让机器人来打扫宿舍!& ...

  2. [iOS] 建立与使用Framework

    [iOS] 建立与使用Framework 前言 使用XCode开发iOS项目时,开发人员可以将可重用的程序代码,封装为Library或是Framework来提供其他开发人员使用.这两种封装方式在使用的 ...

  3. Timeline Portfolio - 时间轴作品集效果

    这里分享一个超炫的时间轴展示作品集效果.设计师和前端开发人员可以借助这个效果来制作新颖的作品集和个人简历.时间轴专门用来呈现出年代的一系列事件.您可以把这种效果嵌入各种媒体,包括微博,视频和地图,并把 ...

  4. 【干货分享】32本优秀的 JavaScript 免费电子书

    JSbooks 收集了32本优秀的 JavaScript 免费电子书,分为初级.中级.高级三个类比,大家可以根据自身的情况需要下载.实实在在的干货!记得收藏和分享啊:) 您可能感兴趣的相关文章 Ver ...

  5. [deviceone开发]-优惠券商户管理端App开源

    一.简介 这是一个优惠券的商主端,也就是配置发送优惠券的App 页面和交互还是像纳豆那样非常漂亮流畅,大家可以参考一下 二.效果图 三.源码分享 https://github.com/do-proje ...

  6. Telerik JustDecompile 2014.1.255.0 开发版（.NET反编译神器，免费下载）

    Telerik JustDecompile是Telerik公司推出一个免费的.NET反编译工具,支持插件与Visual Studio 2015~2013集成,还能够创建Visual Studio Pr ...

  7. AWS EC2 复制实例后，自定义指标无法显示数据

    从一个实例创建了一个AMI,然后通过这个AMI创建新的EC2实例,结果发票自定义指标不会显示: 系统一直在邮件中提示: print() on closed filehandle MDATA at Cl ...

  8. Python学习02 列表 List

    Python学习02 列表 List Python列表 List Python中的列表(List)用逗号分隔,方括号包围(comma-separated values (items) between ...

  9. CoreData数据库迁移的操作

    CoreData数据库迁移操作步骤,操作是基于Xcode7. 1.添加新的数据库.选中当前数据库版本:Editor->Add Model Verson,创建一个新的数据库版本. 2.Comman ...

  10. 实战CENTOS6.5安装docker并创建asp.net mvc 5 镜像，运行MVC 网站

    Docker,容器,让研发.测试.生产同一环境,可在linux平台上混合使用JAVA与net 程序 Centos6.5安装docker 参考http://my.oschina.net/kcw/blog ...