<!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. R语言-GA算法脚本

    ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 ...

  2. INFO: task java:27465 blocked for more than 120 seconds不一定是cache太大的问题

    这几天,老有几个环境在中午收盘后者下午收盘后那一会儿,系统打不开,然后过了一会儿,进程就消失不见了,查看了下/var/log/message,有如下信息: Dec 12 11:35:38 iZ23nn ...

  3. 七个结构模式之装饰者模式(Decorator Pattern)

    定义: 使用组合的方法,动态给一个类增加一些额外的功能,避免因为使用子类继承而导致类继承结构复杂.并且可以保持和被装饰者同一个抽象接口,从而使客户端透明. 结构图: Component:抽象构件类,定 ...

  4. Kickoff - 创造可扩展的，响应式的网站

    Kickoff 是一个轻量级的前端框架,用于创建可扩展的,响应式的网站.作为前端开发人员,我们工作的类型越来越多样化.Kickoff 旨在帮助您在所有项目保持一致的结构和风格,无需添加其他框架. 在线 ...

  5. 通过GP加载卫星云图-雷达图-降雨预报图

    # ---------------------------------------------------------------------------# MeteorologicalImageLo ...

  6. CAML获取SharePoint文档库中除文件夹外所有文档

    方法一: <QueryOptions> <ViewAttributes Scope="Recursive" /> </QueryOptions> ...

  7. 对抽屉效果几大github第三方库的调研

    在公司项目新版本方案选择中,对主导航中要使用的抽屉效果进行了调研.主要原因是旧的项目中所用的库ECS评价不是很好.现对当下比较火的几大热门抽屉效果的第三方库进行了调研.代码全部选自github 如果你 ...

  8. phonegap创建的ios项目推送消息出现闪退现象

    使用phonegap创建的ios项目,推送消息时,当程序在前台运行或者在后台运行状态下,推送消息过来,可以解析并且跳转: 但是在程序从后台退出的状态下,当消息推送过来的时候,点击通知栏,打开程序,程序 ...

  9. WIFI热点

    1.wifi热点是指把手机的接收GPRS.3G或4G信号转化为wifi信号再发出去,这样手机就成了一个WIFI热点. 2.手机必须有无线AP功能,才能当做热点.有些系统自带建热点这个功能比如IOS(比 ...

  10. C语言ASCII码、运算符优先级、转义字符