纯JS实现出生日期[年月日]下拉菜单效果


Posted in Javascript onJune 01, 2018

在制作网页时,可能需要给用户提供注册帐号页面,用户注册 设计很多信息,其中就有 关于出生日期的,出于用户体验,不想让用户手动输入,而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

<script type="text/javascript" src="/js/birthday.js"></script>
<select id="selYear"></select>年
<select id="selMonth"></select>月
<select id="selDay"></select>日
<!--完成出生日期的选择--需写在</body>前-->
<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, 1995, 1, 17);
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的纯JS实现出生日期[年月日]下拉菜单效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
js中的数组对象排序分析
Dec 11 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
详解Angular操作cookies方法
Jun 01 #Javascript
浅谈手写node可读流之流动模式
Jun 01 #Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 #Javascript
基于JS实现带动画效果的流程进度条
Jun 01 #Javascript
说说node中的可读流和可写流的区别
Jun 01 #Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 #Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 #Javascript
You might like
德生1994机评
2021/03/02 无线电
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
php遍历目录方法小结
2015/03/10 PHP
php计算税后工资的方法
2015/07/28 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
python可以用哪些数据库
2020/06/22 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
Html5生成验证码的示例代码
2021/05/10 Javascript