利用select实现年月日三级联动的日期选择效果【推荐】


Posted in Javascript onDecember 13, 2016

前面的话

关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了。本文是选择框脚本的实践,下面将对日期选择效果进行详细介绍

规划

    默认情况下,年、月、日分别由3个select控件组成,id分别为sel1,sel2,sel3。它们且所包含的option[0]的值,分别为'年'、'月'、'日'

 年份范围为1900-2100,月份范围为1-12,天的范围为1-31

 年份范围、月份范围是不变的。而天的范围根据实际日期的计算来改变其范围值

 id为result的span元素储存最终选择的日期值及对应的星期值

<div id="box">
 <select name="sel1" id="sel1">
 <option value="year">年</option>
 </select>
 <select name="sel2" id="sel2">
 <option value="month">月</option>
 </select>
 <select name="sel3" id="sel3">
 <option value="day">日</option>
 </select>
 <span id="result"></span>
</div>

结构生成

由于数据太过庞大,所以使用javascript生成的方式生成结构

//生成1900年-2100年
for(var i = 1900; i<=2100;i++){
 var option = document.createElement('option');
 option.setAttribute('value',i);
 option.innerHTML = i;
 sel1.appendChild(option);
}
//生成1月-12月
for(var i = 1; i <=12; i++){
 var option = document.createElement('option');
 option.setAttribute('value',i);
 option.innerHTML = i;
 sel2.appendChild(option); 
}
//生成1日—31日
for(var i = 1; i <=31; i++){
 var option = document.createElement('option');
 option.setAttribute('value',i);
 option.innerHTML = i;
 sel3.appendChild(option); 
}

算法处理

 算法的实质就是确定某年某月到底有多少天,然后对多余的天数进行删除或者对少的天数进行添加

【1】闰年

 年分为闰年和平年,平年有365天,闰年有366天。闰年的2月比平年多一天

 闰年的定义是(可被4整除)且((不可被100整除)或(可被400整除))的年份

 口诀是:四年一闰,百年不闰,四百年再闰

if((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0){
 return 'leap year'
}else{
 return 'common year'
}

【2】大小月

 一年有12个月,其中4、6、9、11月每月有30天;如果是闰年,2月有29天,否则 ,2月有28天。1、3、5、7、8、10、12月每月有31天

if(month == 2){
 //如果是闰年
 if((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0){
 days = 29;
 //如果是平年
 }else{
 days = 28;
 }
//如果是第4、6、9、11月
}else if(month == 4 || month == 6 ||month == 9 ||month == 11){
 days = 30;
}else{
 days = 31;
}

【3】增减情况

考虑特殊情况,如果先选择31日,再选择2月,则发生错误。所以,选择年份时,月份和天数自动置为默认值'月'和'日',天数的范围重置为'31'

//年份点击
sel1.onclick = function(){
 //月份显示默认值
 sel2.options[0].selected = true;
 //天数显示默认值
 sel3.options[0].selected = true;
}

选择月份时,天数自动置为默认值'日',天数的范围根据计算显示相应天数

此时,天数可能为28、29、30、31四种情况

//增加或删除天数
 //如果是28天,则删除29、30、31天(即使他们不存在也不报错)
 if(days == 28){
 sel3.remove(31);
 sel3.remove(30);
 sel3.remove(29);
 }
 //如果是29天
 if(days == 29){
 sel3.remove(31);
 sel3.remove(30);
 //如果第29天不存在,则添加第29天
 if(!sel3.options[29]){
  sel3.add(new Option('29','29'),undefined)
 }
 }
 //如果是30天
 if(days == 30){
 sel3.remove(31);
 //如果第29天不存在,则添加第29天
 if(!sel3.options[29]){
  sel3.add(new Option('29','29'),undefined)
 }
 //如果第30天不存在,则添加第30天
 if(!sel3.options[30]){
  sel3.add(new Option('30','30'),undefined)
 }
 }
 //如果是31天
 if(days == 31){
 //如果第29天不存在,则添加第29天
 if(!sel3.options[29]){
  sel3.add(new Option('29','29'),undefined)
 }
 //如果第30天不存在,则添加第30天
 if(!sel3.options[30]){
  sel3.add(new Option('30','30'),undefined)
 }
 //如果第31天不存在,则添加第31天
 if(!sel3.options[31]){
  sel3.add(new Option('31','31'),undefined)
 }
 }

【4】结果显示

每次年、月、日的点击事件,都判断年份、月份和天数是否都已经设置为非默认值。如果是的,则显示最终结果,并计算星期值;如果不是,则什么都不执行

//星期格式切换
function changDay(num){
 switch(num){
 case 0:
  return '日';
 case 1:
  return '一';
 case 2:
  return '二';
 case 3:
  return '三';
 case 4:
  return '四';
 case 5:
  return '五';
 case 6:
  return '六';  
 }
}
//结果显示
box.onclick = function(){
 //当年、月、日都已经为设置值时
 if(sel1.value !='year' && sel2.value != 'month' && sel3.value !='day'){
 var day = new Date(sel1.value,sel2.value-1,sel3.value).getDay();
 result.innerHTML = sel1.value + '年' + sel2.value + '月' + sel3.value + '日' + '星期' + changDay(day);
 }else{
 result.innerHTML = '';
 }
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
JS中Attr的用法详解
Oct 09 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 #Javascript
深入理解选择框脚本[推荐]
Dec 13 #Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 #Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 #Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 #Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 #Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 #Javascript
You might like
我的论坛源代码(四)
2006/10/09 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
Extjs学习笔记之六 面版
2010/01/08 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
python映射列表实例分析
2015/01/26 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
python常用函数与用法示例
2019/07/02 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
adidas美国官网:adidas US
2016/09/21 全球购物
教师自我评价范例
2013/09/24 职场文书
设计毕业生简历中的自我评价
2013/10/01 职场文书
道德与公民自我评价
2015/03/09 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
mysql的单列多值存储实例详解
2022/04/05 MySQL