这篇文章主要介绍了javascript日期选择功能,结合实例形式分析了javascript日期与时间相关操作技巧,需要的朋友可以参考下
本文实例讲述了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 />
<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>
运行效果图如下：