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 相关文章推荐
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
underscore之function_动力节点Java学院整理
Jul 11 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
Vue实现购物车实例代码两则
May 30 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
c#中的实现php中的preg_replace
2009/12/21 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
js实现聊天对话框
2020/02/08 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
python脚本实现验证码识别
2018/06/07 Python
用Python读取几十万行文本数据
2018/12/24 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
德国团购网站:Groupon德国
2018/03/13 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
实习自我鉴定范文
2013/10/30 职场文书
八项规定整改措施
2014/02/12 职场文书
广告语设计及教案
2014/03/21 职场文书
2014年采购部工作总结
2014/11/20 职场文书
五一劳动节慰问信
2015/02/14 职场文书
离婚被告答辩状
2015/05/22 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python