JavaScript用select实现日期控件


Posted in Javascript onJuly 17, 2015

代码很简单,这里就不多废话了,直接给大家源码吧

<!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 相关文章推荐
JavaScript 动态改变图片大小
Jun 11 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
详解React之key的使用和实践
Sep 29 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
纯javascript制作日历控件
Jul 17 #Javascript
javascript生成不重复的随机数
Jul 17 #Javascript
jQuery实现径向动画菜单效果
Jul 17 #Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 #Javascript
用svg制作富有动态的tooltip
Jul 17 #Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 #Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 #Javascript
You might like
隐性调用php程序的方法
2009/03/09 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
python的id()函数介绍
2013/02/10 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
Django 解决由save方法引发的错误
2020/05/21 Python
python安装后的目录在哪里
2020/06/21 Python
2014最新自愿离婚协议书范本
2014/11/19 职场文书
优秀护士事迹材料
2014/12/25 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS