web组件-日历控件

<input type="text" id="calendar" readonly/>
<div class="mod dn" id="mod">
    <div class="hd">
        <button class="prev_year" id="prev_year">&lt;&lt;</button>
        <button class="prev_month" id="prev_month">&lt;</button>
        <input type="text" class="year" id="year" readonly/>年
        <input type="text" class="month" id="month" readonly/>月
        <button class="next_month" id="next_month">&gt;</button>
        <button class="next_year" id="next_year">&gt;&gt;</button>
    </div>
    <div class="bd">
        <table>
            <thead>
                <tr>
                    <th>日</th>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                    <th>四</th>
                    <th>五</th>
                    <th>六</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

*{margin:0;padding:0}
.dn{display:none}
.mod .month,.mod .year{width:50px;height:30px;line-height:30px;text-align:center}
.mod button{width:30px;height:30px}
.mod table{width:300px;text-align:center;cursor:pointer}
.mod table tr{height:30px}
.mod .red{background:red}
.mod table td:hover{background:red}

function id(id){
    var doc=document;
    return doc.getElementById(id);
}
id('calendar').onclick= function () {
    id('mod').classList.remove('dn');
    var today=new Date(),
        year=today.getFullYear(),
        month=today.getMonth()+ 1, //0-11
        date=today.getDate(),     //1-31
        firstday=new Date(year,month-1,1).getDay(),//new Date(2001,7,9)== 2001年8月9日; getDay 返回周日=0，周一=1;
        monthdays=0;
    /*初始化年月日*/
    id('year').value=year;
    id('month').value=month;

    monthdays=calmonthday(month);

    var tds=toArray(document.getElementsByTagName('td'));
    tds.forEach(function (element) {
        element.innerHTML='';
    });

    for(var i=0;i<monthdays;i++){
        tds[firstday+i].innerHTML=i+1;
    }
    tds[date-1].classList.add('red');

    /*事件委托获取日期并输入到input*/

    var tbody=document.getElementById('tbody');
    tbody.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement,
            targetContent = parseInt(target.innerHTML);
        if (/d+/.test(targetContent)) {
            id('calendar').value = year + '-' + month + '-' + targetContent;
            id('mod').classList.add('dn');
        }
    };

    /*上一年按钮*/
    id('prev_year').onclick= function () {
        year-=1;
        id('year').value=year;
        id('month').value=month;
        tds.forEach(function (element) {
            element.innerHTML='';
        });
        firstday=new Date(year,month-1,1).getDay();
        for(var i=0;i<monthdays;i++){
            tds[firstday+i].innerHTML=i+1;
        }
        tds[date-1].classList.remove('red');
    }
    /*上个月按钮*/
    id('prev_month').onclick= function () {
        if(month<=1){
            month=12;
            year--;
        }else{
            month--;
        }
        monthdays=calmonthday(month);
        tds.forEach(function (element) {
            element.innerHTML='';
        });
        id('year').value=year;
        id('month').value=month;
        firstday=new Date(year,month-1,1).getDay();
        for(var i=0;i<monthdays;i++){
            tds[firstday+i].innerHTML=i+1;
        }
        tds[date-1].classList.remove('red');
    }
    /*下个月按钮*/
    id('next_month').onclick= function () {
        if(month>=12){
            month=1;
            year++;
        }else{
            month++;
        }
        monthdays=calmonthday(month);
        tds.forEach(function (element) {
            element.innerHTML='';
        });
        id('year').value=year;
        id('month').value=month;
        firstday=new Date(year,month-1,1).getDay();
        for(var i=0;i<monthdays;i++){
            tds[firstday+i].innerHTML=i+1;
        }
        tds[date-1].classList.remove('red');
    }
    /*下一年按钮*/
    id('next_year').onclick= function () {
        year++;
        id('year').value=year;
        id('month').value=month;
        tds.forEach(function (element) {
            element.innerHTML='';
        });
        firstday=new Date(year,month-1,1).getDay();
        for(var i=0;i<monthdays;i++){
            tds[firstday+i].innerHTML=i+1;
        }
        tds[date-1].classList.remove('red');
    }
};

function isLeapYear(iYear) {
    if (iYear % 4 == 0 && iYear % 100 != 0) {
        return true;
    } else {
        if (iYear % 400 == 0) {
            return true;
        } else {
            return false;
        }
    }
}
function calmonthday(month){
    var monthdays;
    switch (month){
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
        case 12:
            monthdays=31;
            break;
        case 4:
        case 6:
        case 9:
        case 11:
            monthdays=30;
            break;
        case 2:
            if(isLeapYear(year)){
                monthdays=29
            }else{
                monthdays=28;
            }
            break;
    }
    return monthdays;
}
function toArray(arr){
    return Array.prototype.slice.call(arr);
}

另附上其他日历控件:

1.https://github.com/tianxiangbing/calendar

调用方式
<!DOCTYPE html>
<html>
	<head>
		<title>日历</title>
		<link rel="stylesheet" type="text/css" href="../src/calendar.css">
	</head>
	<body>
		<script src="../dist/jquery-1.9.1.min.js"></script>
		<script src="../src/calendar.js"></script>
		<input type="text" class="calendar2" value="2015-03-18"/>
		<script>
			$(".calendar2").Calendar();
		</script>
	</body>
</html>