1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>年月日</title>
  5. </head>
  6. <body onLoad="init()">
  7. <select id="year" onChange="swap_day()"></select>年
  8. <select id="month" onChange="swap_day()"></select>月
  9. <select id="day"></select>日
  10. </body>
  11. <script>
  12. var month_big = new Array("1","3","5","7","8","10","12"); //包含所有大月的数组
  13. var month_small = new Array("4","6","9","11"); //包含所有小月的数组 
  14.  
  15. //页面加载时调用的初始化select控件的option的函数
  16. function init()
  17. {
  18.     var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框
  19.     var select_month = document.getElementById("month"); //获取id为"month"的下拉列表框
  20.     var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框
  21.  
  22.     //将年份选项初始化，从1980到2000
  23.     for(var i = 1980; i <= 2000; i++)
  24.     {
  25.         select_year_option = new Option(i, i);
  26.         select_year.options.add(select_year_option);
  27.     }
  28.  
  29.     //将月份选项初始化，从1到12
  30.     for(var i = 1; i <= 12; i++)
  31.     {
  32.         select_month_option = new Option(i, i);
  33.         select_month.options.add(select_month_option);
  34.     }
  35.  
  36.     //调用swap_day函数初始化日期
  37.     swap_day();
  38. }
  39. //判断数组array中是否包含元素obj的函数，包含则返回true，不包含则返回false
  40. function array_contain(array, obj)
  41. {
  42.     for (var i = 0; i < array.length; i++)
  43.     {
  44.         if (array[i] === obj)
  45.         {
  46.             return true;
  47.         }
  48.     }
  49.     return false;
  50. }
  51.  
  52. //根据年份和月份调整日期的函数
  53. function swap_day()
  54. {
  55.     var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框
  56.     var select_month = document.getElementById("month"); //获取id为"month"的下拉列表框
  57.     var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框
  58.  
  59.     select_day.options.length = 0; //在调整前先清空日期选项里面的原有选项
  60.     var month = select_month.options[select_month.selectedIndex].value; //获取被选中的月份month
  61.  
  62.     //如果month被包含在month_big数组中，即被选中月份是大月，则将日期选项初始化为31天
  63.     if(array_contain(month_big, month))
  64.     {
  65.         for(var i = 1; i <= 31; i++)
  66.         {
  67.             select_day_option = new Option(i, i);
  68.             select_day.options.add(select_day_option);
  69.         }
  70.     }
  71.  
  72.     //如果month被包含在month_small数组中，即被选中月份是小月，则将日期选项初始化为30天
  73.     else if(array_contain(month_small, month))
  74.     {
  75.         for(var i = 1; i <= 30; i++)
  76.         {
  77.             select_day_option = new Option(i, i);
  78.             select_day.options.add(select_day_option);
  79.         }
  80.     }
  81.  
  82.     //如果month为2，即被选中的月份是2月，则调用initFeb()函数来初始化日期选项
  83.     else
  84.     {
  85.         initFeb();
  86.     }
  87. }
  88. //判断年份year是否为闰年，是闰年则返回true，否则返回false
  89. function isLeapYear(year)
  90. {
  91.     var a = year % 4;
  92.     var b = year % 100;
  93.     var c = year % 400;
  94.     if( ( (a == 0) && (b != 0) ) || (c == 0) )
  95.     {
  96.         return true;
  97.     }
  98.     return false;
  99. }
  100.  
  101. //根据年份是否闰年来初始化二月的日期选项
  102. function initFeb()
  103. {
  104.     var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框
  105.     var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框
  106.     var year = parseInt(select_year.options[select_year.selectedIndex].value); //获取被选中的年份并转换成Int
  107.  
  108.     //如果是闰年，则将日期选项初始化为29天
  109.     if(isLeapYear(year))
  110.     {
  111.         for(var i = 1; i <= 29; i++)
  112.         {
  113.             select_day_option = new Option(i, i);
  114.             select_day.options.add(select_day_option);
  115.         }
  116.     }
  117.  
  118.     //如果不是闰年，则将日期选项初始化为28天
  119.     else
  120.     {
  121.         for(var i = 1; i <= 28; i++)
  122.         {
  123.             select_day_option = new Option(i, i);
  124.             select_day.options.add(select_day_option);
  125.         }
  126.     }
  127. }
  128. </script>
  129. </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. js 字符串 replace replaceAll

    var str = "男的女的老的少的"; alert(str.replace('的','')); 可以看到替换后的str的值为"男女的老的少的",replac ...

  2. jQuery als.js 跑马灯

    ali.js是一款滚动插件,滚动的内容可包含文字和图片.它的API也很强大,包括滚动区域可见个数.每次滚动个数.滚动方向.是否循环滚动.是否自动滚动.滚动间隔时间.滚动动画速度.动画效果.滚动方向以及 ...

  3. slid.es – 创建在线幻灯片和演示文稿的最佳途径

    slid.es 提供了一种创建在线幻灯片和演示文稿的简单方法,让你通过几个简单的步骤制作效果精美的在线演示文稿.基于 HTML5 和 CSS3 实现,在现代浏览器中效果最佳. 您可能感兴趣的相关文章 ...

  4. JAVASCRIPT实现简单计算器

    最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分? ...

  5. [js开源组件开发]network异步请求ajax的扩展

    network异步请求ajax的扩展 在日常的应用中,你可能直接调用$.ajax是会有些问题的,比如说用户的重复点击,比如说我只希望它成功提交一次后就不能再提交,比如说我希望有个正在提交的loadin ...

  6. Spring------概述

    Spring框架------概述: spring是j2ee应用程序框架,是轻量级的IOC和AOP的容器框架,主要是针对JAVABean的生命周期进行管理的轻量级容器,可以单独使用,也可以和Struts ...

  7. HTML <fieldset> 标签将表单内的相关元素分组

    <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边 ...

  8. Objective-C instancetype关键字

     instancetype是clang 3.5开始,clang提供的一个关键字 表示某个方法返回的未知类型的Objective-C对象 instancetype会告诉编译器当前的类型,这点和NSObj ...

  9. Marketing with Microsoft Dynamics CRM IDEA CONFERENCE

    Object:Marketing with Microsoft Dynamics CRM  IDEA CONFERENCE  24 SEPTEMBER 2015 | BROADCAST ONLINE ...

  10. Atitit jOrgChart的使用  组织架构图css html

    Atitit jOrgChart的使用  组织架构图css html 1. 项目要做组织架构图,要把它做成自上而下的树形结构,于是决定1 2. Html导入 以来的css js1 2.1. 数据来源 ...