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工具 Cookie 封装
Aug 21 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
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
无线电的诞生过程
2021/03/01 无线电
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
python33 urllib2使用方法细节讲解
2013/12/03 Python
python读取excel表格生成erlang数据
2017/08/26 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
Python对列表的操作知识点详解
2019/08/20 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
早读迟到检讨书
2014/01/24 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
五年级小学生评语
2014/12/26 职场文书
项目建议书
2015/02/04 职场文书
学生通报表扬范文
2015/05/04 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python