java用下拉框实现出生日期_纯JS实现出生日期[年月日]下拉菜单效果
在制作网页时,可能需要给用户提供注册帐号页面,用户注册 设计很多信息,其中就有 关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并不是很好,所以就可以用JS实现年、月、日3个下拉框的日期选择。具体代码如下:
1、新建一个js文件,如birthday.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、在注册表单中的页面,引用刚才写的js
年
月
日
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, 1995, 1, 17);
java用下拉框实现出生日期_纯JS实现出生日期[年月日]下拉菜单效果相关推荐
- 搜索引擎下拉食云速捷详细_下拉框搜索定胜云速捷宝典,搜索下拉框再生 云速捷专业...
现在是十人九商的时代,产品种类和数量日益增多,竞争也在不断加大,微商切忌过长时间消耗在熟人市场,因为你的朋友圈熟人购买是有限的,等她们用完再回购需要时间,做久了你会发现,当你把原有的朋友圈子都卖完了, ...
- html5 下拉框 美化,纯js超酷select下拉框美化插件
tastySelect是一款纯js超酷select下拉框美化插件.tastySelect下拉框插件支持多选,内置两种主题,使用CSS3动画过渡效果,整体设计时尚大方. 使用方法 在页面中引入tasty ...
- layui多级联动下拉框的实现_简单三级联动的实现
当我们做一些例如注册页面的时候,可能会遇到要选择地址的操作,这时会出现三个选择框,当你选择省级单位的时候会自动在选择筐中,弹出她所属的市级单位的列表,当选择市级单位时又会弹出县级单位,我们要实现的就是 ...
- Java 表单提交下拉框_Java实现Layui的form表单动态绑定下拉框
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 Java实现Layui的form表单动态绑定下拉框 [1]视图层 爱好: 立即提交 重置 $(function () { //[1]加载&初始化l ...
- java实现设置Excel下拉框在使用Excel的时候用到了下拉框,实现的效果如下↓
在使用Excel的时候用到了下拉框,实现的效果如下↓ 在生成excel文件时,需要根据给出的下拉框选项列表动态生成下拉框.实现代码如下: private void createSelect(XSSFW ...
- mysql下拉框回显_下拉框的回显 (修改时候)
1.效果 2. 实现过程 2.1 点击修改的时候首先根据id去查询该条信息 2.2 显示页面 // 5. select 所属部门 $(function(){ var url="${page ...
- vba有下拉框的模糊查找_巧用数据验证制作模糊匹配的下拉列表
对于Excel的参照性输入,我们一般会使用数据验证里面的序列功能.常规下我们用作系列的数据源无非就是一个数据列表.但这种处理有个很大的问题,那就是如果系列里面的数据项太多,那么在下拉列表里面非常难以查 ...
- 调整下拉框的宽度_调整组合框下拉宽度的大小
调整下拉框的宽度 The TComboBox component combines an edit box with a scrollable "pick" list. Users ...
- 插入的表单控制下拉框怎么设置_想要告别表单重复填写?这一个功能就够了
「表单填写关联」这个功能,小伙伴们有没有用过?在一些日常工作中,很多小伙伴习惯使用表单来提升工作效率,在使用过程中,经常会遇到一些问题,例如,不同的表单,相同的信息,需要重复填写,一次两次还好,可是像 ...
最新文章
- SQL之 Stuff和For xml path
- 【Java Web前端开发】JavaScript高级
- 7月14号day6总结
- html 轮播 平移,网站轮播图的实现-平移版
- 机器学习——人工神经网络之发展历史(神经元数学模型、感知器算法)
- LeetCode MySQL 1308. 不同性别每日分数总计(累加/变量/窗口函数)
- centos挂载第二块硬盘
- 《简明微积分》(第四版)学习笔记
- Java 生成二维码名片(Springboot)
- 批量生成Code128- C条码
- Android 音频管理器AudioManager类介绍
- 你知道二维码的图案原理吗?
- Android 设置Switch样式
- 适合送女朋友的情人节礼物?畅销火热的好物分享
- 爬虫学习:实现对彼岸图4k图片的下载
- 2018-2019年世界经济危机是中国崛起最大的机遇!
- RHEL-UEFI引导恢复规范
- 你真的了解Cookie吗?
- matlab数据采集柜,MATLAB数据采集工具箱
- 新员工入职一个月总结
热门文章
- Ceres Solver从零开始手把手教学使用
- 计算机键盘输入错乱,win10电脑键盘错乱的三种解决方法
- openlayers4+中台风路径播放优化
- 曝大S汪小菲婚宴初定汪小菲三亚顶级酒店
- 小猿圈python之python期末考试测试题(一)_小猿圈python之python期末考试测试题(二)...
- java面向对象三大特性之多态---编译时多态和运行时多态详解
- 第一模块 jdk与jre、==与equals、Math.round(-1.5)、 String、操作字符串的类、字符串反转、抽象类必须要有抽象方法吗、普通类和抽象类、BIO NIO AIO
- 网页制作的一些素材整理(一)
- python人民币转大写_python2.x实现人民币转大写人民币
- tsconfig之strict严格模式相关