<!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. Monkey测试1——Monkey的使用

    Monkey工具使用 一. 什么是Monkey Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输入.手势输入等),实 ...

  2. js的querySelector跟querySelectorAll

    querySelector:document.querySelector('.className')------->可以选中.className的一个dom(注意只是一个) document.q ...

  3. 你应该知道的10个奇特的 HTML5 单页网站

    网页设计师努力寻找新的方式来展现内容.其中一个大的趋势是单页网站,现在被世界上的一些大的品牌广泛采用,使用它们来为用户提供一个快速,干净和简单的而且​​美丽的网站. 下面是10个令人惊叹的单页 H​​ ...

  4. 你真的知道setTimeout是如何运行的吗

    大家看下如下代码,猜猜执行结果: var start = new Date; setTimeout(function(){ console.log('时间流逝了:'+(new Date - start ...

  5. C C++ TDD单元测试非常好的书

    http://product.china-pub.com/199003 测试驱动的嵌入式C语言开发 Test Driven Development for Embedded C <测试驱动的嵌入 ...

  6. Troubleshooting FIM: (No Display Name) in FIM Portal

    from: http://social.technet.microsoft.com/wiki/contents/articles/12682.troubleshooting-fim-no-displa ...

  7. WCF分分钟入门

    近来学习wcf,总结了一下入门的经验,小白的入门篇,也方便以后复习,省的去查质料. 第一步:创建wcf程序,程序初始化有一个接口和一个实现类写个简单的返回方法就可以了: 第二步:创建一个宿主,也就是服 ...

  8. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  9. Android Handler机制(二)---MessageQueue源码解析

    MessageQueue 1.变量 private final boolean mQuitAllowed;//表示MessageQueue是否允许退出 @SuppressWarnings(" ...

  10. 访问其他程序的SheardPreferents

    程序A: SharedPreferences preferences=getSharedPreferences("myPreferences", Context.MODE_WORL ...