利用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 相关文章推荐
js中cookie的使用详细分析
May 28 Javascript
javascript concat数组累加 示例
Sep 03 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
js实现新年倒计时效果
Dec 10 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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+Mysql无限分类的方法汇总
2015/03/02 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
学习python (2)
2006/10/31 Python
Python实现简单的代理服务器
2015/07/25 Python
简单了解python模块概念
2018/01/11 Python
点球小游戏python脚本
2018/05/22 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
python 日期排序的实例代码
2019/07/11 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
毕业生的自我鉴定
2013/10/29 职场文书
传媒专业推荐信范文
2013/11/23 职场文书
写给老师的表扬信
2014/01/21 职场文书
财政专业求职信范文
2014/02/19 职场文书
同学会主持词
2014/03/18 职场文书
辞职书格式样本
2015/02/26 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
MySql数据库触发器使用教程
2022/06/01 MySQL