search

Home >Web Front-end >JS Tutorial >JavaScript date selection function example_javascript skills

JavaScript date selection function example_javascript skills

PHP中文网
PHP中文网Original
2016-05-16 19:10:461108browse

This article mainly introduces the JavaScript date selection function, and analyzes the JavaScript date and time related operation skills in the form of examples. Friends in need can refer to it

This article describes the JavaScript date selection function with examples. Share it with everyone for your reference, the details are as follows: 

<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 />
<p id="dateOp">
  <select id="selectYear" onchange="getDay()"></select>年
  <select id="selectMonth" onchange="getDay()"></select>月
  <select id="selectDay"></select>日
  <input type="button" value="getdate" />
</p>
<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>

The operation effect diagram is as follows:

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：document.createElement("A") relatively good attributes_javascript skillsNext article：document.createElement("A") relatively good attributes_javascript skills

Related articles

See more