利用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 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
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防注入安全代码
2008/04/09 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
PHP取进制余数函数代码
2012/01/19 PHP
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
Laravel下生成验证码的类
2017/11/15 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python学习之asyncore模块用法实例教程
2014/09/29 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
Python实现一个优先级队列的方法
2020/07/31 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
幼儿园课题实施方案
2014/05/14 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python