JavaScript日期选择功能示例

站长资源 2024/11/28 佚名

8 1538 8

DDR爱好者之家 Design By 杰米

本文实例讲述了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>

运行效果图如下：

PS：这里再为大家提供几款日期与日历相关在线工具供大家参考使用：

在线万年历日历：
http://tools.jb51.net/bianmin/wannianli

网页万年历日历：
http://tools.jb51.net/bianmin/webwannianli

在线阴历/阳历转换工具：
http://tools.jb51.net/bianmin/yinli2yangli

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript时间与日期操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JavaScript,日期选择

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“JavaScript日期选择功能示例”

暂无评论...

JavaScript日期选择功能示例

nodejs 实现钉钉ISV接入的加密解密方法

jquery——九宫格大转盘抽奖实例

评论“JavaScript日期选择功能示例”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接