纯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 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
基于Vue实现timepicker
Apr 25 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
详解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
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PHP如何使用Memcached
2016/04/05 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
javascript 定义新对象方法
2010/02/20 Javascript
JS的反射问题
2010/04/07 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
《影子》教学反思
2014/02/21 职场文书
购房意向书范本
2014/04/01 职场文书
建筑安全责任书范本
2014/07/24 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
打架检讨书范文
2015/01/27 职场文书
音乐会主持人开场白
2015/05/28 职场文书
教师素质教育心得体会
2016/01/19 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
基于docker安装zabbix的详细教程
2022/06/05 Servers
Linux中各个目录的作用与内容
2022/06/28 Servers
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis