<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> JS Calendar </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<script>
var id;
function Calendar(obj) {
id = obj.id;
var year;
var month;
var date;
if (obj.value != '')
{
year = obj.value.split("-")[0];
month = obj.value.split("-")[1];
date = obj.value.split("-")[2];
}
else {
var d = new Date();
year = d.getFullYear();
month = d.getMonth()+1;
date = d.getDate();
}
var x = event.x;
var y = event.y;
div = document.getElementById('date_div');
if (div == null)
{
div = makeCal(year,month,date,x,y,id);
document.body.appendChild(div);
markNowRed(date);
}
}
function markNowRed(date) {
// 将当前日期标红。
var tab = document.getElementById('dateTab');
var rows = tab.rows;
for (var i=3;i< rows.length-1; i++)
{
for (var j=0;j<tab.rows[i].cells.length;j++ )
{
if (rows[i].cells[j].firstChild.innerText == date + '')
{
tab.rows[i].cells[j].firstChild.innerHTML = '<span style="color:red;background:green;">'+date+'</span>';
}
}
}
}
function reNewCal(year,month,date,flag,x,y) {
if (flag == 1)
{
year = year - 1;
}
else if (flag == 2)
{
year = year + 1;
}
else if (flag == 3)
{
month = month - 1;
}
else if (flag == 4)
{
month = month + 1;
}
var div = document.getElementById('date_div');
document.body.removeChild(div);
div = makeCal(year,month,date,x,y,id);
document.body.appendChild(div);
markNowRed(date);
}
// 判断是否是闰年
function isLeapYear(year) {
if (year % 4 == 0 && year % 100 != 0)
{
return true;
}
else {
if (year % 400 == 0)
{
return true;
}
return false;
}
}
function makeCal(year,month,date,x,y,id) {
var flag = 0;
var dd;
var div = document.createElement('div');
div.id = 'date_div';
div.style.width = "auto";
div.style.height = "auto";
div.style.position = "absolute";
div.style.border = "1px solid black";
div.style.background = '#D8D8D8';
div.style.left = x;
div.style.height = y + 20;
//第1行
var calTab = "<table id='dateTab'><tr align='center'><td colspan='7'>" + year+'年'+month+'月'+date+"日</td></tr>";
//第2行
calTab += "<tr><td colspan='2'><input type='button' value='<<' id='year1' οnclick=reNewCal("+year+","+month+","+date+","+1+","+x+","+y+")><input type='button' value='<' id='month1' οnclick=reNewCal("+year+","+month+","+date+","+3+","+x+","+y+")></td><td colspan='3'> </td><td colspan='2'><input type='button' value='>' id='month2' οnclick=reNewCal("+year+","+month+","+date+","+4+","+x+","+y+")><input type='button' value='>>' id='year2' οnclick=reNewCal("+year+","+month+","+date+","+2+","+x+","+y+")></td></tr>";
//第3行
calTab += "<tr><td>周日 </td><td>周一 </td><td>周二 </td><td>周三 </td><td>周四 </td><td>周五 </td><td>周六 </td></tr>";
//获取本月的天数
if (isLeapYear(year) && month == 2)
{
day = 28;
}
else if (!isLeapYear(year) && month == 2)
{
day = 29;
}
else {
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12)
{
day = 31;
}
else {
day = 30;
}
}
// 生成日历
for (var d=1;d<=day ;d++ )
{
if (d == 1)
{
da = new Date();
da.setYear(year);
da.setMonth(month-1);
da.setDate(d);
day1 = da.getDay();
}
if (flag % 7 == 0) // 1周
{
calTab += "<tr>";
}
dd = d;
if (d == 1) // 周日
{
// 补白(确定一个月的第一天是周几,后面就好确定了。)
// 如2011-09-01,这天是周四,那么周四之前的td就应该补白。
for (var j=0;j<day1;j++ )
{
calTab += "<td><font> </font></td>";
flag++;
}
calTab += "<td><font style='cursor:hand;' οnclick=setDateVal("+year+","+month+",this)>"+dd+"</font></td>";
flag++;
}
else if(d > 1) {
calTab += "<td><font style='cursor:hand;' οnclick=setDateVal("+year+","+month+",this)>"+dd+"</font></td>";
flag++;
}
if (flag % 7 == 0)
{
calTab += "</tr>";
flag = 0;
}
}
//第9行
//calTab += "<tr align='center'><td colspan='7'><input type='button' value='确定' οnclick=''><input type='button' value='取消' οnclick='hideDiv();'></td></tr></table>";
div.innerHTML = calTab;
return div;
}
function hideDiv() {
var div = document.getElementById('date_div');
document.body.removeChild(div);
}
function setDateVal(year,month,f) {
var dateString = year + '-' + (month<10?"0"+month:month) + '-' + (parseInt(f.innerText) < 10?"0"+f.innerText:f.innerText);
document.getElementById(id).value = dateString;
var div = document.getElementById('date_div');
document.body.removeChild(div);
}
</script>
<input type='text' id='startdate' name='startdate' οnclick='Calendar(this);' value='2011-10-21'>
</body>
</html>
JS日历
最新推荐文章于 2024-05-17 14:54:19 发布