<!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. opencart二次开发小记

    在controller中如果要调用model中数据或说方法可以这样写 $this->load->model('catalog/information');//model中的informat ...

  2. struts原理

    Struts是一个开源的web框架. 为什么会有struts? 因为我们对mvc理解的不同,可能造成不同公司写程序的时候,规范不统一,这样不利于程序的维护和扩展,所以我们有必要用一个统一的规范来开发项 ...

  3. PHP5 各版本维护时间

    版本维护: 5.2:维护至:2011-01-06.支持:xp(2003)以上.最终版本:5.2.17. 5.3:维护至:2014-08-14.支持:xp(2003)以上.最终版本:5.3.29 5.4 ...

  4. word-wrap、white-space和word break的区别

  5. css伪元素实现tootip提示框

    先看效果 废话不说,直接上图(请把鼠标移到我的头像上),看看今天要做的是什么: 实现原理 这些提示框原理都是一样的,且只需一个div标签就能实现,当然也有笨方法,比如用多个标签相互重叠.遮盖,或者干脆 ...

  6. jQuery 重要的知识点归纳

    jQuery 对象 jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象. jQuery 对象是 jQuery 独有的. 只有 jQuery 对象才能使用 jQuery 的方法,在 ...

  7. Android 异步Http框架简介和实现原理

    在前几篇文章中<Android 采用get方式提交数据到服务器><Android 采用post方式提交数据到服务器><Android 采用HttpClient提交数据到服 ...

  8. 你真的了解UIEvent、UITouch吗？

    一:首先查看一下关于UIEvent的定义 //事件类型 typedef NS_ENUM(NSInteger, UIEventType) { UIEventTypeTouches, UIEventTyp ...

  9. 百度编辑器ueditor 异步加载时，初始化没办法赋值bug解决方法

    百度编辑器ueditor 异步加载时,初始化没办法赋值bug解决方法 金刚 前端 ueditor 初始化 因项目中使用了百度编辑器——ueditor.整体来说性能还不错. 发现问题 我在做一个编辑页面 ...

  10. WPF学习之路（十一）布局（续）

    布局实际上是一个Slot模型,其中每个父对象分配给子对象一个Slot,子对象可以自由占用Slot中的空间,通过Margin\VerticalAlignment\HorizontalAlignment控 ...