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判断文本框内容改变事件的简单实例
Mar 07 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
javascript表单事件处理方法详解
May 15 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
vue 数据双向绑定的实现方法
Mar 04 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
PHP类的封装与继承详解
2015/09/29 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
自制PHP框架之设计模式
2017/05/07 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
一份python入门应该看的学习资料
2018/04/11 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python实现文法左递归的消除方法
2020/05/22 Python
Python3开发环境搭建详细教程
2020/06/18 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
学生干部的自我评价分享
2014/01/18 职场文书
开门红主持词
2014/04/02 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
设计专业自荐信
2014/06/19 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
小学数学教学随笔
2015/08/14 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书