业务中有需要批量设置日期的需求,于是动态日历应运而生。。。。
看效果图:
看代码:
<html>
<head>
<title>动态日历</title>
<style type="text/css">
table{border:1px solid white;}
thead tr{background-color:#dfe0e4;}
thead tr td{text-align:center;}
#calendar tr td{color: #000000;text-decoration: none;background-color:#EFEFEF;text-align:center;}
</style>
</head>
<body>
年份:<select id="selYear" name="year" onchange="changeCalendar()"></select>
月份:<select id="selMonth" name="month" onchange="changeCalendar()"></select>
<table width="100%" border="1" cellspacing="0" cellpadding="1">
<thead>
<tr>
<td>Sunday</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
</tr>
</thead>
<tbody id="calendar"></tbody>
</table>
</body>
<script type="text/javascript">
(function(){
var selYear = document.getElementById("selYear");
var selMonth = document.getElementById("selMonth");
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
//生成当前年往前推10往后推5的数据
for(var i = year - 10,len = year + 5; i < len; i++){
var opt = new Option(i + "年", i);
if(i == year) opt.selected = true;
selYear.options.add(opt);
}
//生成月份数据
for(var j = 1; j <= 12; j++){
var m = j < 10 ? "0" + j : j;
var opt = new Option(m + "月", m);
if(j == month) opt.selected = true;
selMonth.options.add(opt);
}
//显示当前月日历
showCalendar(year, month);
})();
//得到每月的天数
function getDaysOfMonth(year, month){
if(year && month){
if(month == 2){
//2月闰年判断
if((year % 4 == 0 && year % 100 !=0) || year % 400 == 0){
return 29;
}
return 28;
}
var bigMonth = [1,3,5,7,8,10,12];
var littleMonth = [4,6,9,11];
for(var m in bigMonth){
if(bigMonth[m] == month)
return 31;
}
for(var m in littleMonth) {
if(littleMonth[m] == month)
return 30;
}
}
}
//根据年月生成日历
function showCalendar(year, month){
if(year && month){
var tbody = document.getElementById("calendar");
//生成前删除之前的行
for(var i = 0,len =tbody.rows.length;i< len;i++){
tbody.deleteRow();
}
var date = new Date(year, month - 1, 1);//month月的第一天
var day = date.getDay();//星期
var days = getDaysOfMonth(year, month);//month月的总天数
var temp = Math.floor((days + day) / 7);
var rows = (days + day) % 7 == 0 ? temp : (temp + 1);//要循环的行数
var d = 1;
for(var i = 1; i <= rows; i++){//循环行
var tr = document.createElement("tr");
for(var j = 1; j <= 7; j++){//循环列
var td = document.createElement("td");
//超过最大天数赋空
if(d > days){
td.innerHTML = "";
tr.appendChild(td);
continue;
}
if(i == 1){
//第一行判断month月第一天是星期几,例如星期二前面空两个周日、周一
if(j >= day + 1){
var html = "<input type='checkbox' name='chkDay'>";
td.innerHTML = html + (d < 10 ? "0" + d : d);
d++;
}else{
td.innerHTML = "";
}
} else {
var html = "<input type='checkbox' name='chkDay'>";
td.innerHTML = html + (d < 10 ? "0" + d : d);
d++;
}
tr.appendChild(td);
}
tbody.appendChild(tr);
}
}
}
function changeCalendar(){
var y = document.getElementById("selYear").value;
var m = document.getElementById("selMonth").value;
showCalendar(y, m);
}
</script>
</html>
- 大小: 6.5 KB
- 大小: 6.4 KB
- 大小: 6.3 KB
分享到:
相关推荐
js动态日历~可在相应日期添加对应的事项
此程序是javascript和php开发,提供酒店、门票订购的价格日历和点击日历订购产品功能。详细请参考驴妈妈 酒店和门票的价格日历。 index.html 入口文件 data.php 包含一个价格日历生成类和 一些实例 product.php ajax...
不错的js日历特效js动态记事日历漂亮js动态记事日历漂亮
javascript实现的动态日历,可以用于jsp或asp页面,界面美观,是一款非常专业的日历组件。
js超好日历表js超好日历表js超好日历表js超好日历表
简单易用的javascript日历,包括一个例子。编码可以是utf-8也可以是GBK
js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件
基于javascript脚本的网页日历控件,格式为2013-01-01
javascript实现的一个日历效果,下载直接运行即可,纯javascript原生实现,简易的日历效果
三款js日历,有很漂亮的哦!javascript 日历。很别致的
使用js + html 实现的简单的网页版日历,顶部默认会显示当前日期和时间,时间会精确到秒,并且时间会实时刷新,日历UI符合主流日历的样式,可以选择年,月,日查看每个月份的每一天对应星期几,默认显示当前日期所在...
js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js...
js日历选择代码,js实现日历选择,很实用的哦
javascript小巧日历插件 javascript小巧日历插件 javascript小巧日历插件 javascript小巧日历插件
个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件
JS 日历组件(功能很强) javascript 日历控件 日历选择空间 日期选择 强烈推荐
js日历大全(收积几种JS日历),可以方便直接应用于项目中。
js日历 12种js日历 有带文本框的,有像360日历,兼容性好。 特殊声明 ,文件中有个文件 Setup.rar 是无意中上传。可以删除,360提醒是病毒,建议下载后删除。刚发现及时通报。
javascript实现日历,仅供参考javascript实现日历,仅供参考javascript实现日历,仅供参考javascript实现日历,仅供参考javascript实现日历,仅供参考javascript实现日历,仅供参考
用javascript面向对象的方法,加上清晰的思路,只用几行代码就做出了一个日历