<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>selectDate.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var dayInMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
function getDays(month,year)
{
if(month==1)
{
return (((year%4==0)&&((year%100)!=0))||(year%400==0))?29:28;
}
else
{
return dayInMonth[month];
}
}
function createYear()
{
var year =1980;
for(var i =0;i<100;i++)
{
document.all.year.options[document.all.year.length] = new Option(year+i);
}
}
function getMonth()
{
return document.all.month.options[document.all.month.selectedIndex].value;
}
function getYear()
{
//string
return document.all.year.options[document.all.year.selectedIndex].value;
}
function createTable()
{
var month = parseInt(getMonth());
var year = parseInt(getYear());
var date = new Date();
date.setFullYear(year,month,1);//month:0~11
//0~6依次表示星期天,123456
var intDay = date.getDay();
//array数组存放当月的日期信息,和星期对齐。
var array = new Array(40);
for(var i=0;i<array.length;i++)
{
array[i]="";
}
var j =1;
for(var i=0;i<getDays(month,year);i++)
{
array[i+intDay]=j;
j++;
}
/*
for(var i=0;i<getDays(month,year)+intDay;i++)
{
if(i%7==6)
{
$("#dateTable").append(array[i]+"<br>");
}
else
{
$("#dateTable").append(array[i]+" ");
}
}
*/
//清除上一次的结果
$("#dateTable tr:gt(0)").remove();
var html="";
for(var i=0;i<getDays(month,year)+intDay;i++)
{
if(i%7==0)
{
html+="<tr><td>"+array[i]+"</td>";
}
else if(i%7==6)
{
html+="<td>"+array[i]+"</td></tr>";
}
else
{
html+="<td>"+array[i]+"</td>";
}
}
$("#dateTable").append(html);
}
$(function()
{
createYear();
$("#year").change(function()
{
createTable();
});
$("#month").change(function()
{
createTable();
});
});
</script>
</head>
<body>
<div align="center">
请选择月份:
<select name="month" id="month">
<option value="0">一月</option>
<option value="1">二月</option>
<option value="2">三月</option>
<option value="3">四月</option>
<option value="4">五月</option>
<option value="5">六月</option>
<option value="6">七月</option>
<option value="7">八月</option>
<option value="8">九月</option>
<option value="9">十月</option>
<option value="10">十一月</option>
<option value="11">十二月</option>
</select>
<select name="year" id="year">
<option>----</option>
</select>
<br><br><br><br>
<table id="dateTable" align="center" cellpadding="10">
<tr>
<td>星期天</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
</tr>
</table>
</div>
</body>
</html>
jquery实现的日期选择器
最新推荐文章于 2024-04-19 15:10:07 发布