<!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. python打印进度条

    import sys,time第一种方法: for i in range(50): sys.stdout.write("#") time.sleep(0.1) sys.stdout ...

  2. [小北De编程手记] : Lesson 01 玩转 xUnit.Net 之 概述

    谈到单元测试,任何一个开发或是测试人员都不会觉得陌生.我想大多数的同学也都是接触过各种单元测试框架.关于单元测试的重要性,应该不会有太多的质疑.这个系列,我向大家介绍一下xUnit.Net的使用.就让 ...

  3. spring mvc+ELK从头开始搭建日志平台

    最近由于之前协助前公司做了点力所能及的事情,居然收到了一份贵重的端午礼物,是给我女儿的一个乐高积木,整个有7大包物件,我花了接近一天的时间一砖一瓦的组织起来,虽然很辛苦但是能够从过程中体验到乐趣.这次 ...

  4. 图解javascript this指向什么？

    JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发现JavaScript其实很难掌握,有 ...

  5. 一款效果精致的 jQuery 多层滑出菜单插件

    想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了.Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜 ...

  6. sqlmap笔记

    sqlmap -u "注入链接" --其他参数或命令 (-v 1表示回显出注入过程) [判断指定字段是否存在注入点]当链接包含两个参数时,可用-p开关选择要注入的参数,例检测id是 ...

  7. Web自动化测试 Selenium 2/3

    TesNG和Selenium集成使用 TestNG 是一个设计用来简化广泛的测试需求的测试框架,从单元测试(隔 离测试一个类)到集成测试(测试由有多个类多个包甚至多个外部框架组成的整 个系统,例如运用 ...

  8. iOS数据缓存及YYCache的实现分析

    1. 什么是cache cache就是缓存的意思. 计算机上的cache就是高速缓存,计算机组成课程里的定义是,存在于主存和CPU之间,主要用于解决CPU处理数据的速度远远大于读取主存数据的速度. 手 ...

  9. Mac系统如何编辑hosts文件

    Mac系统如何编辑hosts文件 Hosts 是一个没有扩展名的系统文件,其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”,当用户在浏览器中输入一个需要登录的网址时,系 统会首先 ...

  10. 【Android】中兴ZTE sdcard路径的问题

    测试机: ZTE U950 现象: 用Environment.getExternalStorageDirectory()取到的路径是/mnt/sdcard 真相: /mnt/sdcard/是一个空文件 ...