<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<style>
html,body{background:#000;font-size:12px;text-align:left;}
*{margin:0px;padding:0px}
#selectDay{width:490px;margin:0px auto;position:relative;}
#slelectyear{float:left;font-size:24px;color:#fff;display:inline;clear:both;width:100%;cursor:pointer}
#slelectmonth{float:right;font-size:40px;color:#fff;width:40px;display:inline;clear:both;cursor:pointer;text-align:center;}
select{border:none;background:#000;color:#fff;font-size:20px;display:none;position:absolute;cursor:pointer}
#year{left:0px;top:2px;}
#month{right:-30px;top:30px;font-size:36px;}
#selectDay table{border-top:1px solid #fff;color:#fff;border-left:1px solid #fff;width:100%}
#selectDay table th,#selectDay table td{border-bottom:1px solid #fff;border-right:1px solid #fff;text-indent:10px;padding- top:40px;padding-bottom:10px;font-weight:normal;}
</style>
<body>
<div id="selectDay">
<div id="slelectyear">
</div>
<div id="slelectmonth">
</div>
<table border="0" cellspacing="0" cellpadding="0" style="float:left;" id="tabDay">
<tr>
<th valign="bottom">周日</th><th >周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
<select id="year">
</select>
<select id="month" >
</select>
</div>
<script type="text/javascript">
var slelectyear = document.getElementById("slelectyear");
var slelectmonth = document.getElementById('slelectmonth');
var year = document.getElementById("year");
var month = document.getElementById("month");
var tabDay = document.getElementById("tabDay").getElementsByTagName("td");
var maxMonth = [1,3,5,7,8,10,12];
var twoMonth ;
var week;
var minMonth = [4,6,9,11];
var MonthOfDay;
var Days;
var selectDate={
setting:{
yearStart:1950,
yearEnd:2050
},
nowDate:{
nowYear:function(){
return new Date().getFullYear()
},
nowMonth:function(){
return new Date().getMonth()+1
},
nowDay:function(){
return new Date().getDay()
}
},
init:function(){
slelectyear.innerHTML = selectDate.nowDate.nowYear();
slelectmonth.innerHTML = selectDate.nowDate.nowMonth()+"月";
yearAll = parseInt(selectDate.setting.yearEnd - selectDate.setting.yearStart);
var yearBegin = parseInt(selectDate.setting.yearStart);
//生成年选项菜单
for(var i=0;i<yearAll+1;i++){
year.options.add(new Option(yearBegin,yearBegin));
(function(x){
if(year.options[x].text == parseInt(selectDate.nowDate.nowYear())){
year.options[x].selected = true;
};
})(i);
yearBegin++;
};
//生成月选项菜单
for(var i=0;i<12;i++){
month.options.add(new Option(i+1,i+1));
(function(x){
if(month.options[x].text == parseInt(selectDate.nowDate.nowMonth())){
month.options[x].selected = true;
};
})(i);
};
},
MonthDay:function(){
//判断2月
if(parseInt(year.options[year.selectedIndex].text)%4!=0){
twoMonth = 28;
}else{
twoMonth = 29;
};
//判断大月小月
for(var i=0;i<7;i++){
if(parseInt(month.options[month.selectedIndex].text) == maxMonth[i]){
MonthOfDay = 31
}
if(parseInt(month.options[month.selectedIndex].text) == minMonth[i]){
MonthOfDay = 30
}
}
if(parseInt(month.options[month.selectedIndex].text)==2){
Days = parseInt(twoMonth);
}else{
Days = parseInt(MonthOfDay);
};
},
weekDay:function(){
var d = new Date();
d.setFullYear(parseInt(year.options[year.selectedIndex].text),parseInt(month.options[month.selectedIndex].text)-1,1)
var day =1;
for(var i=0;i<Days;i++){
tabDay[i+parseInt(d.getDay())].innerHTML = day
day++;
};
},
changeDay:function(){
var d = new Date();
d.setFullYear(parseInt(year.options[year.selectedIndex].text),parseInt(month.options[month.selectedIndex].text)-1,1)
var day =1;
for(var i=0;i<tabDay.length;i++){
tabDay[i].innerHTML="";
};
for(var i=0;i<Days;i++){
tabDay[i+parseInt(d.getDay())].innerHTML = day
day++;
};
},
set:function(){
selectDate.init();
selectDate.MonthDay();
selectDate.weekDay();
month.onchange = function(){
selectDate.MonthDay();
slelectmonth.innerHTML = month.options[month.selectedIndex].text+"月";
selectDate.changeDay();
};
year.onchange = function(){
slelectyear.innerHTML = year.options[year.selectedIndex].text;
selectDate.MonthDay();
selectDate.changeDay();
};
}
};
selectDate.set();
var display = function(){
slelectyear.onmouseover = function(){
year.style.display = "block";
};
year.onblur = function(){
year.style.display = "none";
}
slelectmonth.onmouseover = function(){
month.style.display = "block";
};
month.onblur = function(){
month.style.display = "none";
}
};
display()
</script>
</body>
</html>
