利用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树形菜单
Dec 09 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
windows下更新npm和node的方法
Nov 30 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
Javascript实现打鼓效果
Jan 29 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取出数组单个值的方法
2018/03/12 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
jQuery Dom元素操作技巧
2018/02/04 jQuery
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
更改Python命令行交互提示符的方法
2015/01/14 Python
python批量生成本地ip地址的方法
2015/03/23 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
解析python的局部变量和全局变量
2019/08/15 Python
Python2与Python3的区别点整理
2019/12/12 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
scrapy-splash简单使用详解
2021/02/21 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
酒吧创业计划书
2014/01/18 职场文书
中学生期末评语
2014/02/03 职场文书
建材投资建议书
2014/05/16 职场文书
行政司机岗位职责
2015/04/10 职场文书
实习证明模板
2015/06/16 职场文书
无故旷工检讨书
2015/08/15 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL