利用select实现年月日三级联动的日期选择效果
前面的话
关于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 = '';} }
转载于:https://www.cnblogs.com/xiaohuochai/p/5877594.html
利用select实现年月日三级联动的日期选择效果相关推荐
- 年月日三级联动六级联动
1 问题介绍 最近在开发中遇到一个日期选择的问题,一开始只需要写一个三级联动的年月日下拉框,效果就像这样 没写css样式,请忽略丑度,直接上手撸代码,代码逻辑挺简单的,就主要用了new option( ...
- Android年月日选择,Android日期选择器实现年月日三级联动
最近项目里面用到了一个日期选择器,实现现在主流的WheelView滑动选择,整理了下,做了个Demo.废话不多说,直接上代码. 主布局:activity_main.xml xmlns:tools=&q ...
- Android 如何实现时间年月日三级联动呢 直接上代码 看效果图
对于Android 初学者来说我推荐 :TimePickerView 好用 代码简洁更容易看懂 优点: 1 , 年月日可自行修改 2 ,字体颜色 展示都可修改.直接上代码 示例如下: 步骤 1.添加J ...
- SAP选择屏幕中实现三级联动下拉框效果
TYPE-POOLS:VRM. DATA: NAME TYPE VRM_ID. DATA:NUM TYPE I. "根据PRODH字段长度判断 某行属于哪一级 DATA:LOADED TYP ...
- SpringBoot 全国省市区三级联动 Ajax动态绑定select
SpringBoot 全国省市区三级联动 Ajax动态绑定select 文章目录 前言 一.三级联动? 二.分析与编码 1.数据库 2.SQL 3.编写Controller 4.Ajax动态绑定sel ...
- php创建无限级树型菜单以及三级联动菜单
http://www.php.cn/php-weizijiaocheng-373500.html 这篇文章主要介绍了php创建无限级树型菜单 ,主要使用的是递归函数,感兴趣的小伙伴们可以参考一下 写递 ...
- jq加载json数据实现三级联动
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- jquery省地市三级联动
需要核心文件jquery.cityselect.js,通过ajax访问获取省地市数据文件 /*Ajax 三级省市联动http://code.ciaoca.cn/日期:2012-7-18settings ...
- 省市县三级联动demo
1.首先是省市县数据的js:city.min.js,代码如下: {"citylist":[{"p":"北京","c":[ ...
最新文章
- 机器学习工程师 - Udacity 可视化 CNN
- 南开大学教授:科研开源的行动倡议!
- 三层交换机的热备实验
- [CareerCup] 11.1 Merge Arrays 合并数组
- 创新实训个人记录 : 个人工作总结
- libsvm 64 系统下编译问题
- 距离算法在概率统计C语言,基于CBM-TOF探测器无触发数据获取系统的压缩算法-应用概率统计.PDF...
- matlab 高斯函数_光学与matlab:高斯光的模拟
- Qt文档阅读笔记-Rotations Example相关
- Java千百问_04异常处理(007)_常见的java异常有哪些(非运行时)
- android opengl版本太低,Android OpenGL:可能内存不足?
- IncrediBuild 加速原理
- 假如让你来设计SSL/TLS协议,你要怎么设计呢?
- Java JDK文档下载
- 利用 MATLAB 和 DCRAW 处理数码相机 RAW 文件的完整流程
- 大学计算机网络实验网线制作,计算机网络实验报告 网线的制作.doc
- 怎么在中国知网免费下载论文?
- 关于花瓣网header条的思考
- 人民币对美元汇率中间价报6.7542元 上调18个基点
- 一键获取Windows锁屏壁纸