JavaScript日期选择功能示例


Posted in Javascript onJanuary 16, 2017

本文实例讲述了JavaScript日期选择功能。分享给大家供大家参考,具体如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>javascript日期选择</title>
  <style type="text/css">
    option{
      width:150px;
    }
  </style>
</head>
<body>
<!--<input type="hidden" value="window.location.href" />-->
<br />
<div id="dateOp">
  <select id="selectYear" onchange="getDay()"></select>年
  <select id="selectMonth" onchange="getDay()"></select>月
  <select id="selectDay"></select>日
  <input type="button" value="getdate" />
</div>
<script type="text/javascript">
  //或得当前年月日
  var date = new Date();
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  var startYear = 2000;
  var endYear = 2050;
  var button = document.getElementsByTagName("input")[0];
  //得到三个select项
  var selectYearElement = document.getElementById("selectYear");
  var selectMonthElement = document.getElementById("selectMonth");
  var selectDayElement = document.getElementById("selectDay");
  //selectYearElement.onchange = getDay();
  //selectMonthElement.onchange = getDay();
  //selectYearElement.addEventListener
  getYear();
  getMonth();
  getDay();
  //年份函数
  function getYear() {
    for (var i = startYear; i <= endYear; i++) {
      var opYearElement = document.createElement("option");
      var textElement = document.createTextNode(i);
      opYearElement.appendChild(textElement);
      opYearElement.value = i;
      selectYearElement.appendChild(opYearElement);
    }
//设置默认年份的值
    selectYearElement.selectedIndex = year - startYear;
  }
  //月份函数
  function getMonth() {
    for (var i = 1; i <= 12; i++) {
      var opMonthElement = document.createElement("option");
      textMonth = document.createTextNode(i);
      opMonthElement.appendChild(textMonth);
      opMonthElement.value = i;
      selectMonthElement.appendChild(opMonthElement);
    }
//设置默认年份的值
    selectMonthElement.selectedIndex = month - 1;
  }
  //日期函数
  function getDay() {
    var getSelectedYear = selectYearElement.selectedIndex + startYear;
    var getSelectedMonth = selectMonthElement.selectedIndex + 1;
    var flag = 0;
    var selectDayElement = document.getElementById("selectDay");
    if (selectDayElement.hasChildNodes()) {
      var optionElements = selectDayElement.getElementsByTagName("option");
      for (var i = 0; i < optionElements.length; i++) {
        selectDayElement.removeChild(optionElements[0]);
//不知道为什么必须得自减一
        i--;
      }
    }
    else {
    }
//得到闰年
    if ((getSelectedYear % 4 == 0 && getSelectedYear % 100 != 0) || getSelectedYear % 400 == 0) {//得到闰年的年号
//alert("闰年");
//得到闰年大月份除二月以外
      if ((getSelectedMonth <= 7 && getSelectedMonth % 2 == 1 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 0)) {//得到大月
        setDay(flag = 31);
      }
      else if (getSelectedMonth <= 7 && getSelectedMonth == 2) {
        setDay(flag = 29);
      }
      else if ((getSelectedMonth <= 7 && getSelectedMonth % 2 == 0 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 1)) {//得到小月份除二月以外
        setDay(flag = 30);
      }
    }
//非闰年
    else {
//alert("平年");
//得到平年大月份除二月以外
      if ((getSelectedMonth <= 7 && getSelectedMonth % 2 == 1 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 0)) {//得到大月
        setDay(flag = 31);
      }
      else if (getSelectedMonth <= 7 && getSelectedMonth == 2) {
        setDay(flag = 28);
      }
      else if ((getSelectedMonth <= 7 && getSelectedMonth % 2 == 0 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 1)) {//得到小月份除二月以外
        setDay(flag = 30);
      }
    }
  }
  //设置默认年份的值
  selectDayElement.selectedIndex = day - 1;
  function setDay(dayLength) {
    for (var i = 1; i <= dayLength; i++) {
      var opDayElement = document.createElement("option");
      textMonth = document.createTextNode(i);
      opDayElement.appendChild(textMonth);
      opDayElement.value = i;
//alert(i);
      selectDayElement.appendChild(opDayElement);
    }
  }
  button.onclick = function () {
    var getSelectedYear = selectYearElement.selectedIndex + startYear;
    var getSelectedMonth = selectMonthElement.selectedIndex + 1;
    var getSelectedDay = selectDayElement.selectedIndex + 1;
    alert("当前选中的日期是:" + getSelectedYear + "年" + getSelectedMonth + "月" + getSelectedDay + "日")
  }
  //getDay
</script>
</body>
</html>

运行效果图如下:

JavaScript日期选择功能示例

Javascript 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 #Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 #Javascript
Node.js中用D3.js的方法示例
Jan 16 #Javascript
JavaScript实现的select点菜功能示例
Jan 16 #Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 #Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 #Javascript
js实现弹窗暗层效果
Jan 16 #Javascript
You might like
输出控制类
2006/10/09 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
php两种无限分类方法实例
2015/04/21 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
php和html的区别点详细总结
2019/09/24 PHP
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
原生js实现轮播图
2017/02/27 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
python代码编写计算器小程序
2020/03/30 Python
python join方法使用详解
2019/07/30 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
Django-migrate报错问题解决方案
2020/04/21 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
python实现邮件循环自动发件功能
2020/09/11 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
制衣厂各岗位职责
2013/12/02 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
裁员通知
2015/04/25 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL