利用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 获取LI里的内容
Dec 17 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 Javascript
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
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
python打开网页和暂停实例
2014/09/30 Python
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
Python内置函数dir详解
2015/04/14 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
简历上的自我评价
2014/02/03 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
2015年党建工作总结
2015/03/30 职场文书
代码复现python目标检测yolo3详解预测
2022/05/06 Python
MySQL批量更新不同表中的数据
2022/05/11 MySQL