JavaScript日期選擇功能示例

2019-11-19 17:55:32

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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>

運行效果圖如下：