JS日历

最新推荐文章于 2024-05-17 14:54:19 发布

luckystar2008

最新推荐文章于 2024-05-17 14:54:19 发布

阅读量602

点赞数

文章标签：日历 date div calendar function button

本文链接：https://blog.csdn.net/qincidong/article/details/6801499

版权

Front End 专栏收录该内容

119 篇文章 0 订阅

订阅专栏

<!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>