[转]纯JS实现出生日期[年月日]下拉菜单
纯JS实现出生日期[年月日]下拉菜单
在制作网页时,可能需要给用户提供注册帐号页面,用户注册 设计很多信息,其中就有 关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并不是很好,所以就可以用JS实现年、月、日3个下拉框的日期选择。具体代码如下:
1、新建一个js文件:
function DateSelector(selYear, selMonth, selDay) {//定义函数 this.selYear = selYear; this.selMonth = selMonth; this.selDay = selDay; this.selYear.Group = this; this.selMonth.Group = this; // 给年份、月份下拉菜单添加处理onchange事件的函数 if (window.document.all != null) // IE { this.selYear.attachEvent("onchange", DateSelector.Onchange); this.selMonth.attachEvent("onchange", DateSelector.Onchange); } else // Firefox { this.selYear.addEventListener("change", DateSelector.Onchange, false); this.selMonth.addEventListener("change", DateSelector.Onchange, false); } if (arguments.length == 4) // 如果传入参数个数为4,最后一个参数必须为Date对象 this.InitSelector(arguments[3].getFullYear(), arguments[3].getMonth() + 1, arguments[3].getDate()); else if (arguments.length == 6) // 如果传入参数个数为6,最后三个参数必须为初始的年月日数值 this.InitSelector(arguments[3], arguments[4], arguments[5]); else // 默认使用当前日期 { var dt = new Date(); this.InitSelector(dt.getFullYear(), dt.getMonth() + 1, dt.getDate()); } } // 增加一个最小年份的属性--最老年份 DateSelector.prototype.MinYear = 1960; // 增加一个最大年份的属性--最新年份,即当前时期getFullYear() DateSelector.prototype.MaxYear = (new Date()).getFullYear(); // 初始化年份 DateSelector.prototype.InitYearSelect = function () { // 循环添加OPION元素到年份select对象中 for (var i = this.MaxYear; i >= this.MinYear; i--) { // 新建一个OPTION对象 var op = window.document.createElement("OPTION"); // 设置OPTION对象的值 op.value = i; // 设置OPTION对象的内容 op.innerHTML = i; // 添加到年份select对象 this.selYear.appendChild(op); } } // 初始化月份 DateSelector.prototype.InitMonthSelect = function () { // 循环添加OPION元素到月份select对象中 for (var i = 1; i < 13; i++) { // 新建一个OPTION对象 var op = window.document.createElement("OPTION"); // 设置OPTION对象的值 op.value = i; // 设置OPTION对象的内容 op.innerHTML = i; // 添加到月份select对象 this.selMonth.appendChild(op); } } // 根据年份与月份获取当月的天数 DateSelector.DaysInMonth = function (year, month) { var date = new Date(year, month, 0); return date.getDate(); } // 初始化天数 DateSelector.prototype.InitDaySelect = function () { // 使用parseInt函数获取当前的年份和月份 var year = parseInt(this.selYear.value); var month = parseInt(this.selMonth.value); // 获取当月的天数 var daysInMonth = DateSelector.DaysInMonth(year, month); // 清空原有的选项 this.selDay.options.length = 0; // 循环添加OPION元素到天数select对象中 for (var i = 1; i <= daysInMonth; i++) { // 新建一个OPTION对象 var op = window.document.createElement("OPTION"); // 设置OPTION对象的值 op.value = i; // 设置OPTION对象的内容 op.innerHTML = i; // 添加到天数select对象 this.selDay.appendChild(op); } } // 处理年份和月份onchange事件的方法,它获取事件来源对象(即selYear或selMonth) // 并调用它的Group对象(即DateSelector实例,请见构造函数)提供的InitDaySelect方法重新初始化天数 // 参数e为event对象 DateSelector.Onchange = function (e) { var selector = window.document.all != null ? e.srcElement : e.target; selector.Group.InitDaySelect(); } // 根据参数初始化下拉菜单选项 DateSelector.prototype.InitSelector = function (year, month, day) { // 由于外部是可以调用这个方法,因此我们在这里也要将selYear和selMonth的选项清空掉 // 另外因为InitDaySelect方法已经有清空天数下拉菜单,因此这里就不用重复工作了 this.selYear.options.length = 0; this.selMonth.options.length = 0; // 初始化年、月 this.InitYearSelect(); this.InitMonthSelect(); // 设置年、月初始值 this.selYear.selectedIndex = this.MaxYear - year; this.selMonth.selectedIndex = month - 1; // 初始化天数 this.InitDaySelect(); // 设置天数初始值 this.selDay.selectedIndex = day - 1; }
2.主页面:
<html> <body> //年月日下拉菜单<select id="selYear"></select>年<select id="selMonth"></select>月<select id="selDay"></select>日 //三个隐藏文本域用来存放获取的年月日 <asp:HiddenField ID="HF1" runat="server" /> <asp:HiddenField ID="HF2" runat="server" /> <asp:HiddenField ID="HF3" runat="server" /> </body> <html> <script type="text/javascript">//年月日var selYear = window.document.getElementById("selYear");var selMonth = window.document.getElementById("selMonth");var selDay = window.document.getElementById("selDay");// 新建一个DateSelector类的实例,将三个select对象传进去new DateSelector(selYear, selMonth, selDay, 2015, 2, 2);// 也可以试试下边的代码// var dt = new Date(2004, 1, 29);// new DateSelector(selYear, selMonth ,selDay, dt);//获取选中年月日的值,这里有个问题,默认的年月日如果不选择,会发生报错,这时候应该设置文本域默认的value值和默认的年月日一样,就可以避免错误了var selectY = document.getElementById('selYear');var selectM = document.getElementById('selMonth');var selectD = document.getElementById('selDay');var h1 = document.getElementById('HF1');var h2 = document.getElementById('HF2');var h3 = document.getElementById('HF3');selectY.onchange = function () {h1.value = selectY.options[selectY.selectedIndex].text;}selectM.onchange = function () {h2.value = selectM.options[selectM.selectedIndex].text;}selectD.onchange = function () {h3.value = selectD.options[selectD.selectedIndex].text;} </script>
转载于:https://www.cnblogs.com/zhangxin4477/p/6882219.html
[转]纯JS实现出生日期[年月日]下拉菜单相关推荐
- java用下拉框实现出生日期_纯JS实现出生日期[年月日]下拉菜单效果
在制作网页时,可能需要给用户提供注册帐号页面,用户注册 设计很多信息,其中就有 关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并不是很好,所以就可以用J ...
- php表单设置出生日期,纯JS实现出生日期[年月日]下拉菜单效果_茜茜_前端开发者...
在制作网页时,可能需要给用户提供注册帐号页面,用户注册 设计很多信息,其中就有 关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并不是很好,所以就可以用 ...
- html5 下拉框 美化,纯js超酷select下拉框美化插件
tastySelect是一款纯js超酷select下拉框美化插件.tastySelect下拉框插件支持多选,内置两种主题,使用CSS3动画过渡效果,整体设计时尚大方. 使用方法 在页面中引入tasty ...
- 纯CSS实现蓝色圆角下拉菜单
代码简介: 这个菜单没有使用任何的图片,完全是用CSS实现的,包括圆角效果也同样是,而且还考虑了多浏览器的兼容性,可以说非常不错,既兼容性好,又外观漂亮,下拉导航菜单目前比较流行,好好感觉一下本款菜单 ...
- js+css+html制作下拉菜单
js+css+html制作下拉菜单 1 案例需求 2 编写HTML结构代码 3 编写css样式 4 编写JavaScript部分 5 全部代码 1 案例需求 使用JavaScript+css+html ...
- 纯HTML、CSS实现下拉菜单
在完成百度前端学院的初级任务阶段时,是不允许使用 javascript 来制作页面动态效果,但是对于下拉菜单效果的实现可以仅仅通过纯HTML和CSS来完成. (效果图) 实现的思路为,利用单选框(ra ...
- html5地区下拉菜单,JS特效:地区下拉菜单
可变的下拉菜单是网页中非常常见的一项功能,现在给大家做一个非常简单的实现,原理很简单,本质就是元素的显示与隐藏.代码如下大家试试. HTML 西安市 铜川市 宝鸡市 未央区 莲湖区 新城区 碑林区 雁 ...
- 原生JS实现点击下拉菜单
接上一篇博文,这里实现点击下拉菜单. 与悬停不同的是,悬停的操作都是hover,直接写入CSS即可,这里需要将静态和动态样式分离,再JS添加点击事件,使用排他法绑定给目标元素特定的样式. 具体实现见下 ...
- vue.js bootstrap 下拉列表_Excel下拉菜单制作的小技巧
在工作中,常常需要对多行多列的数据设置下拉菜单,但在使用数据验证,设置下拉菜单时,序列来源是不能执行引用多行多列区域的,否则即会出现下图提示框,应该如何进行设置呢? 第一步:定义名称框 鼠标依次点击公 ...
- js实现简单的下拉菜单列表
下拉菜单 效果图: 基本代码 如下: <!DOCTYPE html> <html><head><meta charset=</
最新文章
- ios11修改微信步数_小程序同步微信步数
- R语言ggplot2地理信息可视化(上)
- Java开源Web Service(转)
- oracle pga的作用,浅析Oracle中PGA和UGA两者间的区别
- 什么是 SAP UI5 的 Element binding
- .net npoi xssfclientanchor设置图片缩放大小_.NET导出Excel的四种方法及评测
- .NET网站国际化策略
- 初学Java编程经常遇到的问题,你们遇到过吗?
- laravel5.6 使用指定字段作为key_MyRocks TTL使用姿势及Bugfix
- YOLACT论文笔记
- Javascript倒计时页面跳转
- 绝大部分博士目前都无法进入大学
- 0423-mysql查询语句大全
- java手机翻译,使用JUniversal翻译Android项目
- office visio 2007 画流程图
- 掘金 MySQL 小册的艰辛创作历程
- [渝粤教育] 长安大学 液压传动 参考 资料
- codeforces 417D. Cunning Gena 状压dp
- 保定计算机软件学院是哪个区,河北软件职业技术学院在哪个区
- drf路由组件Routers
热门文章
- c语言汽水瓶编程,汽水瓶 题目(C语言代码)
- EasyTouch的使用
- Nginx+Tomcat+SSL 识别 https还是http
- 微服务发展的历史_三位一体的中台、微服务和云原生,揭示了软件架构的最新发展趋势...
- 能做多大的单片机项目程序开发,就代表了你的敲代码的水平
- Jenkins系列三通过脚本方式部署maven项目,maven聚合项目到Tomcat
- 【渝粤题库】广东开放大学 秘书理论与实务(1) 形成性考核
- DWRUtil.addOptions
- 你不可不知的Java引用类型之——ReferenceQueue源码详解
- CSS3 过渡 transition