<script>
//服务器返回当前年,月,日
var year=2011;
var month=8;
var day=4;
var serviceDate;
//设置当前时间
function setMyDate(year,month){
//设置当月第一天时间
serviceDate=new Date(year,month-1,1,0,0,0,0);
document.getElementById("nowYear").value=year;
document.getElementById("nowMonth").value=month;
}
//初始化下拉框
function initSelect(){
var yearSelect=document.getElementById("nowYear");
var monthSelect=document.getElementById("nowMonth");
for(var i=0;i<50;i++){
yearSelect.options.add(new Option(1990+i,1990+i));
}
for(var i=1;i<13;i++){
monthSelect.options.add(new Option(i,i));
}
}
//返回当前年份月份天数
function getMonthDay(year,month){
var monthDay=[0,31,28,31,30,31,30,31,31,30,31,30,31];
//是否闰年
if((year%4==0&&year%100!=0)||year%400==0){
monthDay[1]=29;
}
return monthDay[month];
}
//设置日期,星期对应
function setMonthValue(year,month,day){
var dayValue=getMonthDay(year,month);
//当月第一天所对应星期
var oneDay=serviceDate.getDay();
var calenDarArray=[];
for(var i=1,j=0;i<=dayValue;i++){
if(i==1){
calenDarArray[j]=[];
calenDarArray[j][oneDay]=i;
i=7-oneDay;
}
else{
calenDarArray[j]=[];
calenDarArray[j][0]=i;
i=6+i;
}
j++;
}
return calenDarArray;
}
//设置日期到表格
function setDateToTable(year,month,day){
var mytable=document.getElementById("dateTable");
var tr6=document.getElementById("tr6");
var calenDarArray=setMonthValue(year,month,day);
var monthDay=getMonthDay(year,month);
if(calenDarArray.length==5){
tr6.style.display="none";
}
else{
tr6.style.display="block";
}
for(var i=0;i<calenDarArray.length;i++){
var row=mytable.rows[i+2];
var index=0;
for(var j=0;j<7;j++){
var cell=row.cells[j];
if(calenDarArray[i][j]!=undefined){
index=j;
cell.innerHTML=calenDarArray[i][index]++;
}
else{
cell.innerHTML=(calenDarArray[i][index]==undefined || calenDarArray[i][index]>monthDay)?" ":calenDarArray[i][index]++;
}
}
}
}
//显示日历
function initCalenDar(year,month,day){
setMyDate(year,month);
setDateToTable(year,month,day);
}
function fnYearChange(year){
var month=document.getElementById("nowMonth").value;
initCalenDar(year,month);
}
function fnMonthChange(month){
var year=document.getElementById("nowYear").value;
initCalenDar(year,month);
}
window.onload=function(){
initSelect();
initCalenDar(year,month);
}
</script>
<body>
<table id="dateTable" border="1" width="500" >
<tr>
<td colspan="7" height="20">
年份:<select id="nowYear" onchange="fnYearChange(this.value)"></select>
月份:<select id="nowMonth" onchange="fnMonthChange(this.value)"></select>
</td>
</tr>
<tr>
<td>周日</td><td>周一</td><td>周二</td><td>周三</td><td>周四</td><td>周五</td><td>周六</td>
</tr>
<tr id="tr1">
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
</tr>
<tr id="tr2">
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
</tr>
<tr id="tr3">
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
</tr>
<tr id="tr4">
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
</tr>
<tr id="tr5">
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
</tr>
<tr id="tr6">
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
<td height=20 width=20></td>
</tr>
</table>
</body>
没事干自己写个小日历 就是太丑了 功能还不是很完善
分享到:
相关推荐
js 实现 自定义的日历! 值得下载看看!资源免费,大家分享!!
js日历控件实例源码 js日历控件实例源码
一个可以自定义样式的JS日历控,挺使用的哦。
本人自定义的一个日历插件,仅供参考学习
jQuery UI自定义样式日历代码.zip
自定义 日历 控件 自己写的,有什么不好的给点指点
js日历控件大全,包含测试例子test.html,可设置"年月日"、"年月"、"年月日时",输入格式可自定义
jQuery自定义日历事项查看代码是一款支持切换年月视图和日期选择功能代码。
Calendar 自定义日历选择器,时间范围精确到日,可精准自定义设置每个日期的初始样式和点击后的回调,提供 "弹层模式" 和 "普通排列" 的两种模式。
JQ版本自定义日历控件
打卡签到日历,支持自定义样式,支持农历,支持二次开发
小程序日历组件,可显示农历!休假补班!自定义提醒
jQuery UI自定义样式日历代码是一款基于jquery-ui.js实现的日期日历代码。
自定义日历控件,封装了JS脚本,源码加控件
JS自定义日期级联
自定义日历备忘录控件使用jquery和javascript做的。里面有年月日和事件清单List。在年月日的画面里面,每个日期里面都包含了当天的事件信息。数据源采用json格式。
javascript日历插件,可以自定义时间或者日期
汇集了5个带有时间的js日历控制,其中包括一个日期时间C#用户控件,可以自定义日期时间格式,另外4个是常用的js日期时间控件,其中包含一个功能强大,可以自定义配置的My97DatePicker日历时间控件。
纯JS写的日历,农历阳历24节气,自定义事件. 纯JS写的日历,农历阳历24节气,自定义事件.